refactor: improve button component styles (#7517)

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.21.x

#### What this PR does / why we need it:

1. Add ghost variant
2. Improve icon style
3. Refactoring css using scss functions

#### Does this PR introduce a user-facing change?

```release-note
None
```

ui/console-src/modules/system/users/UserList.vue

@@ -198,14 +198,14 @@ function onCreationModalClose() {
           type="default"
         >
           <template #icon>
-            <IconShieldUser class="h-full w-full" />
+            <IconShieldUser />
           </template>
           {{ $t("core.user.actions.roles") }}
         </VButton>
         <HasPermission :permissions="['*']">
           <VButton :route="{ name: 'AuthProviders' }" size="sm" type="default">
             <template #icon>
-              <IconLockPasswordLine class="h-full w-full" />
+              <IconLockPasswordLine />
             </template>
             {{ $t("core.user.actions.identity_authentication") }}
           </VButton>
@@ -216,7 +216,7 @@ function onCreationModalClose() {
           @click="creationModal = true"
         >
           <template #icon>
-            <IconAddCircle class="h-full w-full" />
+            <IconAddCircle />
           </template>
           {{ $t("core.common.buttons.new") }}
         </VButton>
@@ -326,7 +326,7 @@ function onCreationModalClose() {
                 @click="creationModal = true"
               >
                 <template #icon>
-                  <IconAddCircle class="h-full w-full" />
+                  <IconAddCircle />
                 </template>
                 {{ $t("core.common.buttons.new") }}
               </VButton>