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/Dashboard.vue

@@ -43,7 +43,7 @@ provide<ComputedRef<DashboardWidgetDefinition[]>>(
         @click="$router.push({ name: 'DashboardDesigner' })"
       >
         <template #icon>
-          <IconSettings class="h-full w-full" />
+          <IconSettings />
         </template>
         {{ $t("core.dashboard.actions.setting") }}
       </VButton>