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/contents/posts/PostEditor.vue

@@ -522,7 +522,7 @@ useSlugify(
           "
         >
           <template #icon>
-            <IconHistoryLine class="h-full w-full" />
+            <IconHistoryLine />
           </template>
           {{ $t("core.post_editor.actions.snapshots") }}
         </VButton>
@@ -533,13 +533,13 @@ useSlugify(
           @click="handlePreview"
         >
           <template #icon>
-            <IconEye class="h-full w-full" />
+            <IconEye />
           </template>
           {{ $t("core.common.buttons.preview") }}
         </VButton>
         <VButton :loading="saving" size="sm" type="default" @click="handleSave">
           <template #icon>
-            <IconSave class="h-full w-full" />
+            <IconSave />
           </template>
           {{ $t("core.common.buttons.save") }}
         </VButton>
@@ -550,7 +550,7 @@ useSlugify(
           @click="handleOpenSettingModal"
         >
           <template #icon>
-            <IconSettings class="h-full w-full" />
+            <IconSettings />
           </template>
           {{ $t("core.common.buttons.setting") }}
         </VButton>
@@ -560,7 +560,7 @@ useSlugify(
           @click="handlePublishClick"
         >
           <template #icon>
-            <IconSendPlaneFill class="h-full w-full" />
+            <IconSendPlaneFill />
           </template>
           {{ $t("core.common.buttons.publish") }}
         </VButton>