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/dashboard/DashboardDesigner.vue

@@ -37,7 +37,6 @@ import {
 import type { GridLayout } from "vue-grid-layout";
 import { useI18n } from "vue-i18n";
 import { onBeforeRouteLeave, useRouter } from "vue-router";
-import RiArrowGoBackLine from "~icons/ri/arrow-go-back-line";
 import RiBox3Line from "~icons/ri/box-3-line";
 import RiFileCopyLine from "~icons/ri/file-copy-line";
 import WidgetEditableItem from "./components/WidgetEditableItem.vue";
@@ -339,16 +338,13 @@ function handleCopyFromLayout(breakpoint: string) {
       ></VTabbar>
     </div>
     <VSpace>
-      <VButton @click="handleBack">
-        <template #icon>
-          <RiArrowGoBackLine class="h-full w-full" />
-        </template>
+      <VButton ghost @click="handleBack">
         {{ $t("core.common.buttons.back") }}
       </VButton>
       <VDropdown>
         <VButton>
           <template #icon>
-            <IconAddCircle class="h-full w-full" />
+            <IconAddCircle />
           </template>
           {{ $t("core.dashboard_designer.actions.add_widget") }}
         </VButton>
@@ -396,7 +392,7 @@ function handleCopyFromLayout(breakpoint: string) {
         @click="handleSave"
       >
         <template #icon>
-          <IconSave class="h-full w-full" />
+          <IconSave />
         </template>
         {{ $t("core.common.buttons.save") }}
       </VButton>