diff --git a/packages/ui/src/components/va-button/VaButton.demo.vue b/packages/ui/src/components/va-button/VaButton.demo.vue
index 92e4ca5872..0af8065cf0 100644
--- a/packages/ui/src/components/va-button/VaButton.demo.vue
+++ b/packages/ui/src/components/va-button/VaButton.demo.vue
@@ -1,247 +1,129 @@
 <template>
   <VbDemo>
-    <VbCard title="empty">
-      <va-button />
-    </VbCard>
-
-    <VbCard>
+    <VbCard class="va-button-demo">
       <table class="table table-bordered">
-        <tr>
-          <th>Description</th>
-          <th>Vuestic Button</th>
-        </tr>
         <tr>
           <td>Types</td>
           <td>
-            <va-button outline>
-              Outline Button
-            </va-button>
-            <va-button flat>
-              Flat Button
-            </va-button>
-          </td>
-        </tr>
-        <tr>
-          <td>Sizes</td>
-          <td>
-            <va-button>
-              Default Button
-            </va-button>
-            <va-button size="large">
-              Large Button
-            </va-button>
-            <va-button size="small">
-              Small Button
-            </va-button>
-            <va-button outline>
-              Default Button
-            </va-button>
-            <va-button
-              size="large"
-              outline
-            >
-              Large Button
-            </va-button>
-            <va-button
-              size="small"
-              outline
-            >
-              Small Button
-            </va-button>
-            <va-button flat>
-              Default Button
-            </va-button>
-            <va-button
-              size="large"
-              flat
-            >
-              Large Button
-            </va-button>
-            <va-button
-              size="small"
-              flat
-            >
-              Small Button
-            </va-button>
+            <va-config :components="{ VaButton: {} }">
+              <va-button>Accent (default)</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.primary } }">
+              <va-button>Primary</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.secondary } }">
+              <va-button>Secondary</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.plain } }">
+              <va-button>Plain</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.plainOpacity } }">
+              <va-button>Plain with opacity</va-button>
+            </va-config>
           </td>
         </tr>
+
         <tr>
-          <td>Primary Button Colors</td>
+          <td>Small size</td>
           <td>
-            <div>
-              <va-button>
-                Success Button
-              </va-button>
-              <va-button color="info">
-                Info Button
-              </va-button>
-              <va-button color="danger">
-                Danger Button
-              </va-button>
-              <va-button color="warning">
-                Warning Button
-              </va-button>
-              <va-button color="gray">
-                Gray Button
-              </va-button>
-              <va-button color="dark">
-                Dark Button
-              </va-button>
-            </div>
+            <va-config :components="{ VaButton: { size: 'small' } }">
+              <va-button>Accent (default)</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.primary, size: 'small' } }">
+              <va-button>Primary</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.secondary, size: 'small' } }">
+              <va-button>Secondary</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.plain, size: 'small' } }">
+              <va-button>Plain</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.plainOpacity, size: 'small' } }">
+              <va-button>Plain with opacity</va-button>
+            </va-config>
           </td>
         </tr>
         <tr>
-          <td>Outline Button Colors</td>
+          <td>With icons</td>
           <td>
-            <div>
-              <va-button outline>
-                Success Button
-              </va-button>
-              <va-button
-                outline
-                color="info"
-              >
-                Info Button
-              </va-button>
-              <va-button
-                outline
-                color="danger"
-              >
-                Danger Button
-              </va-button>
-              <va-button
-                outline
-                color="warning"
-              >
-                Warning Button
-              </va-button>
-              <va-button
-                outline
-                color="gray"
-              >
-                Gray Button
-              </va-button>
-              <va-button
-                outline
-                color="dark"
-              >
-                Dark Button
-              </va-button>
-            </div>
+            <va-config :components="{ VaButton: {} }">
+              <va-button icon="create">Edit Button</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.secondary } }">
+              <va-button icon="gavel" iconRight="clear">Mixed Button</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.plainOpacity } }">
+              <va-button icon="gavel">Plain with icon</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: { size: 'small' } }">
+              <va-button icon="create">Small Edit Button</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: {} }">
+              <va-button icon="gavel" icon-color="warning">Mixed Colors</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.primary } }">
+              <va-button icon-right="clear">Dropdown Button</va-button>
+            </va-config>
           </td>
         </tr>
         <tr>
-          <td>Flat Button Colors</td>
+          <td>Button Colors</td>
           <td>
-            <div>
-              <va-button flat>
-                Success Button
-              </va-button>
-              <va-button
-                flat
-                color="info"
-              >
-                Info Button
-              </va-button>
-              <va-button
-                flat
-                color="danger"
-              >
-                Danger Button
-              </va-button>
-              <va-button
-                flat
-                color="warning"
-              >
-                Warning Button
-              </va-button>
-              <va-button
-                flat
-                color="gray"
-              >
-                Gray Button
-              </va-button>
-              <va-button
-                flat
-                color="dark"
-              >
-                Dark Button
-              </va-button>
-            </div>
+            <va-config :components="{ VaButton: {} }">
+              <va-button color="info">Info</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.primary } }">
+              <va-button color="danger">Danger</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.secondary } }">
+              <va-button color="warning">Warning</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.plain } }">
+              <va-button color="gray">Gray</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.plainOpacity } }">
+              <va-button color="dark">Dark</va-button>
+            </va-config>
           </td>
         </tr>
         <tr>
           <td>Disabled state</td>
           <td>
-            <va-button disabled>
-              Default Button
-            </va-button>
-            <va-button
-              disabled
-              outline
-            >
-              Outline Button
-            </va-button>
-            <va-button
-              disabled
-              flat
-            >
-              Flat Button
-            </va-button>
+            <va-config :components="{ VaButton: {} }">
+              <va-button disabled>Accent (default)</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.primary } }">
+              <va-button disabled>Primary</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.secondary } }">
+              <va-button disabled>Secondary</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.plain } }">
+              <va-button disabled>Plain</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.plainOpacity } }">
+              <va-button disabled>Plain with opacity</va-button>
+            </va-config>
           </td>
         </tr>
         <tr>
           <td>Button tags</td>
           <td>
-            <va-button>
-              Default Button
-            </va-button>
-            <va-button
-              href="http://epic-spinners.epicmax.co/"
-            >
-              A-link Button
-            </va-button>
-            <va-button
-              to="/demo"
-            >
-              Router-link Button
-            </va-button>
+            <va-button>Default</va-button>
+            <va-button href="http://epic-spinners.epicmax.co/">A-link Button</va-button>
+            <va-button to="/demo">Router-link Button</va-button>
           </td>
         </tr>
         <tr>
-          <td>Primary Buttons With icons</td>
+          <td>Buttons with icons (as slots with config)</td>
           <td>
-            <va-button icon="create">
-              Plus Button
-            </va-button>
-            <va-button iconRight="clear">
-              Dropdown button
-            </va-button>
-            <va-button icon="create" iconRight="clear">
-              Mixed button
-            </va-button>
-            <va-button icon="palette" color="warning" text-color="danger" />
-            <va-button icon-right="create" color="warning" text-color="danger" />
-            <va-button icon="palette" icon-right="create" color="warning" text-color="#45ffaa" />
-          </td>
-        </tr>
-        <tr>
-          <td>Buttons with icons (As slots with config)</td>
-          <td>
-            <va-config :components="{ VaIcon: { color: '#f00' } }">
-              <va-button color="warning" space-between-items>
+            <va-config :components="{ VaButton: {}, VaIcon: { color: '#f00' } }">
+              <va-button color="danger" space-between-items>
                 <va-icon name="gavel" color="white" />
                 Colored icons
                 <va-icon name="shield" color="white" />
               </va-button>
-
-              <va-button color="warning" flat space-between-items>
-                <va-icon name="gavel" color="warning" />
-                Colored icons
-                <va-icon name="shield" color="warning" />
-              </va-button>
-
-              <va-button color="warning" outline space-between-items>
+              <va-button color="warning" plain space-between-items>
                 <va-icon name="gavel" color="warning" />
                 Colored icons
                 <va-icon name="shield" color="warning" />
@@ -252,82 +134,35 @@
         <tr>
           <td>Outline Buttons With icons</td>
           <td>
-            <va-button outline icon="create">
-              Plus Button
-            </va-button>
-            <va-button outline iconRight="clear">
-              Dropdown button
-            </va-button>
-            <va-button outline icon="create" iconRight="clear">
-              Mixed button
-            </va-button>
-          </td>
-        </tr>
-        <tr>
-          <td>Flat Buttons With icons</td>
-          <td>
-            <va-button flat icon="create">
-              Plus Button
-            </va-button>
-            <va-button flat iconRight="clear">
-              Dropdown button
-            </va-button>
-            <va-button flat icon="create" iconRight="clear">
-              Mixed button
-            </va-button>
-          </td>
-        </tr>
-        <tr>
-          <td>Large Buttons With icons</td>
-          <td>
-            <va-button
-              size="large"
-              icon="create"
-            >
-              Plus Button
-            </va-button>
-            <va-button
-              outline
-              size="large"
-              iconRight="clear"
-            >
-              Dropdown button
-            </va-button>
-            <va-button
-              flat
-              size="large"
-              icon="create" iconRight="clear"
-            >
-              Mixed button
-            </va-button>
-          </td>
-        </tr>
-        <tr>
-          <td>Small Buttons With icons</td>
-          <td>
-            <va-button size="small" icon="create">
-              Plus Button
-            </va-button>
-            <va-button outline size="small" iconRight="clear">
-              Dropdown button
-            </va-button>
-            <va-button flat size="small" icon="create" iconRight="clear">
-              Mixed button
-            </va-button>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.secondary, borderColor: 'primary' } }">
+              <va-button icon="create">Secondary</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.secondary, borderColor: 'primary' } }">
+              <va-button iconRight="clear">Secondary</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.secondary, borderColor: 'primary' } }">
+              <va-button icon="create" iconRight="clear">Secondary</va-button>
+            </va-config>
           </td>
         </tr>
         <tr>
-          <td>All Buttons Without Title</td>
+          <td>Icons-only Buttons</td>
           <td>
-            <va-button icon="block" />
-            <va-button size="large" icon="block" />
-            <va-button size="small" icon="block" />
-            <va-button outline icon="block" />
-            <va-button outline size="large" icon="block" />
-            <va-button outline size="small" icon="block" />
-            <va-button flat icon="block" />
-            <va-button flat size="large" icon="block" />
-            <va-button flat size="small" icon="block" />
+            <va-config :components="{ VaButton: {} }">
+              <va-button icon="block" />
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.primary } }">
+              <va-button icon="block" />
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.secondary } }">
+              <va-button icon="block" />
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.plain } }">
+              <va-button icon="block" />
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.plainOpacity } }">
+              <va-button icon="block" />
+            </va-config>
           </td>
         </tr>
         <tr>
@@ -335,91 +170,28 @@
             Buttons with loading status
           </td>
           <td>
-            <va-button
-              :loading="buttonLoading"
-              @click="buttonLoading = true"
-              size="small"
-            >
-              Start loading
-            </va-button>
-            <va-button
-              :loading="buttonLoading"
-              @click="buttonLoading = true"
-              size="medium"
-            >
-              Start loading
-            </va-button>
-            <va-button
-              :loading="buttonLoading"
-              @click="buttonLoading = true"
-              size="large"
-            >
-              Start loading
-            </va-button>
-            <va-button
-              @click="buttonLoading = false"
-            >
-              Stop loading
-            </va-button>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            Block button (full width)
-          </td>
-          <td>
-            <va-button block>
-              Block Button
-            </va-button>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            Square button
-          </td>
-          <td style="padding-top: 10px;">
-            <va-button
-              :rounded="false"
-              size="small"
-              style="margin-right: 10px;"
-            >
-              Square Button
-            </va-button>
-            <va-button
-              :rounded="false"
-              size="medium"
-              style="margin-left: 10px;"
-            >
-              Square Button
-            </va-button>
-            <va-button
-              :rounded="false"
-              size="large"
-              style="margin-left: 10px;"
-            >
-              Square Button
-            </va-button>
-            <va-button
-              :rounded="false"
-              size="medium"
-              outline
-              style="margin-left: 10px;"
-            >
-              Square Button
-            </va-button>
+            <va-config :components="{ VaButton: {} }">
+              <va-button :loading="buttonLoading" @click="buttonLoading = true">Start loading</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.primary } }">
+              <va-button :loading="buttonLoading" @click="buttonLoading = true">Start loading</va-button>
+            </va-config>
+            <va-config :components="{ VaButton: {} }">
+              <va-button @click="buttonLoading = false">Stop loading</va-button>
+            </va-config>
           </td>
         </tr>
-
         <tr>
           <td>
             Round button
           </td>
-          <td style="padding-top: 10px;">
-            <va-button
-              style="margin-right: 10px;"
-              round
-            >
-            </va-button>
+          <td>
+            <va-config :components="{ VaButton: {} }">
+              <va-button round icon="block" />
+            </va-config>
+            <va-config :components="{ VaButton: { ...vaButtonPresets.primary } }">
+              <va-button round icon="block" />
+            </va-config>
           </td>
         </tr>
 
@@ -427,19 +199,14 @@
           <td>
             Space between items
           </td>
-          <td style="padding-top: 10px;">
-            <va-button
-              style="margin-right: 10px;"
-              spaceBetweenItems
-            >
-              Item
-            </va-button>
-            <va-button
-              style="margin-right: 10px;"
-              spaceBetweenItems
-            >
-              Item
-            </va-button>
+          <td>
+            <va-config :components="{ VaButton: {} }">
+              <va-button spaceBetweenItems>
+                <va-icon name="block" />
+                <va-icon name="block" />
+                <va-icon name="block" />
+              </va-button>
+            </va-config>
           </td>
         </tr>
 
@@ -447,40 +214,20 @@
           <td>
             Public methods (focus, blur)
           </td>
-          <td style="padding-top: 10px;">
-            <va-button
-              style="margin-right: 10px;"
-              @click="$refs.testButton.focus()"
-            >
-              Focus right button
-            </va-button>
-            <va-button
-              size="large"
-              style="margin-right: 10px;"
-              ref="testButton"
-            >
-              Button
-            </va-button>
-            <va-button
-              style="margin-right: 10px;"
-              @click="$refs.testButton.blur()"
-            >
-              Blur left button
-            </va-button>
+          <td>
+            <va-button @click="$refs.testButton.focus()">Focus Main Button</va-button>
+            <va-button ref="testButton">Main Button</va-button>
+            <va-button @click="$refs.testButton.blur()">Blur Main Button</va-button>
           </td>
         </tr>
-
         <tr>
           <td>
             Multiline text
           </td>
-          <td style="padding-top: 10px;">
+          <td>
             <va-button style="width: 150px;">
               Default Button with long text
             </va-button>
-            <va-button size="large" style="width: 150px;">
-              Large Button with long text
-            </va-button>
             <va-button size="small" style="width: 150px;">
               Small Button with long text
             </va-button>
@@ -497,13 +244,54 @@ import VaConfig from '../va-config'
 import VaButton from './index'
 
 export default {
-  components: {
-    VaButton, VaIcon, VaConfig,
-  },
-  data () {
-    return {
-      buttonLoading: true,
-    }
-  },
+  components: { VaButton, VaIcon, VaConfig },
+  data: () => ({
+    vaButtonPresets: {
+      primary: {
+        backgroundOpacity: 0.1,
+        hoverBehaviour: 'opacity',
+        hoverOpacity: 0.07,
+        pressedBehaviour: 'opacity',
+        pressedOpacity: 0.13,
+      },
+      secondary: {
+        backgroundOpacity: 0,
+        hoverBehaviour: 'opacity',
+        hoverOpacity: 0.07,
+        pressedBehaviour: 'opacity',
+        pressedOpacity: 0.13,
+      },
+      plain: {
+        plain: true,
+        hoverBehaviour: 'mask',
+        hoverOpacity: 0.15,
+        pressedBehaviour: 'mask',
+        pressedOpacity: 0.13,
+      },
+      plainOpacity: {
+        plain: true,
+        textOpacity: 0.6,
+        hoverBehaviour: 'opacity',
+        hoverOpacity: 1,
+        pressedBehaviour: 'opacity',
+        pressedOpacity: 0.9,
+      },
+    },
+    buttonLoading: true,
+  }),
 }
 </script>
+
+<style lang="scss">
+.va-button-demo {
+  & .va-button {
+    margin-right: 16px;
+  }
+
+  & td {
+    padding-top: 16px;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>
diff --git a/packages/ui/src/components/va-button/VaButton.vue b/packages/ui/src/components/va-button/VaButton.vue
index fc120b4105..c171d26836 100644
--- a/packages/ui/src/components/va-button/VaButton.vue
+++ b/packages/ui/src/components/va-button/VaButton.vue
@@ -5,7 +5,7 @@
     class="va-button"
     :class="computedClass"
     :style="computedStyle"
-    v-bind="{ ...buttonAttributesComputed, ...linkAttributesComputed }"
+    v-bind="attributesComputed"
   >
     <div class="va-button__content" :class="wrapperClassComputed">
       <va-icon
@@ -34,15 +34,19 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, computed, ref, ShallowRef } from 'vue'
+import { defineComponent, PropType, computed, ref, ShallowRef, toRef } from 'vue'
 
-import { useHover } from '../../composables/useHover'
 import { useFocus } from '../../composables/useFocus'
-import { usePressed } from '../../composables/usePressed'
+import { useHover, useHoverProps } from '../../composables/useHover'
+import { usePressed, usePressedProps } from '../../composables/usePressed'
 import { useTextColor } from '../../composables/useTextColor'
 import { useColors } from '../../services/color-config/color-config'
-import { colorToRgba, getGradientBackground } from '../../services/color-config/color-functions'
-
+import {
+  colorToRgba,
+  isLightBackground,
+  getGradientBackground,
+  getStateMaskGradientBackground,
+} from '../../services/color-config/color-functions'
 import { useLoadingProps } from '../../composables/useLoading'
 import { useSize, useSizeProps } from '../../composables/useSize'
 import { useRouterLink, useRouterLinkProps } from '../../composables/useRouterLink'
@@ -55,6 +59,8 @@ export default defineComponent({
   components: { VaIcon, VaProgressCircle },
   props: {
     ...useSizeProps,
+    ...useHoverProps,
+    ...usePressedProps,
     ...useLoadingProps,
     ...useRouterLinkProps,
     tag: { type: String, default: 'button' },
@@ -64,21 +70,14 @@ export default defineComponent({
 
     color: { type: String, default: 'primary' },
     textColor: { type: String, default: '' },
-    borderColor: { type: String, default: '' },
-    backgroundColor: { type: String, default: '' },
+    textOpacity: { type: Number, default: 1 },
     backgroundOpacity: { type: Number, default: 1 },
-    contentOpacity: { type: Number, default: 1 },
-
-    hoverBehaviour: { type: String as PropType<'opacity' | 'gradient'>, default: '' },
-    hoverOpacity: { type: Number, default: 1 },
-    hoverGradientMask: { type: String, default: 'rgba(255, 255, 255, 0.15)' },
-
-    pressedBehaviour: { type: String as PropType<'opacity' | 'gradient'>, default: '' },
-    pressedOpacity: { type: Number, default: 1 },
-    pressedGradientMask: { type: String, default: 'rgba(0, 0, 0, 0.13)' },
+    borderColor: { type: String, default: '' },
 
     gradient: { type: Boolean, default: false },
     plain: { type: Boolean, default: false },
+
+    // only for standalone-icon state
     round: { type: Boolean, default: false },
     spaceBetweenItems: { type: Boolean, default: false },
     size: {
@@ -90,15 +89,12 @@ export default defineComponent({
     icon: { type: String, default: '' },
     iconRight: { type: String, default: '' },
     iconColor: { type: String, default: '' },
-
-    // temp
-    preset: { type: String, default: '' },
   },
   setup (props, { slots }) {
     // colors
     const { getColor } = useColors()
-    const bgColorComputed = computed(() => getColor(props.backgroundColor, 'primary'))
     const colorComputed = computed(() => getColor(props.color, 'primary'))
+    const isTransparentBg = toRef(props, 'plain')
 
     // loader size
     const { sizeComputed } = useSize(props)
@@ -107,7 +103,7 @@ export default defineComponent({
       return size ? `${+size[1] / 2}${size[2]}` : sizeComputed.value
     })
 
-    // link attributes
+    // attributes
     const { tagComputed, hrefComputed, isLinkTag } = useRouterLink(props)
     const linkAttributesComputed = computed(() => {
       if (!isLinkTag.value) { return {} }
@@ -128,7 +124,6 @@ export default defineComponent({
         }
     })
 
-    // button attributes
     const typeComputed = computed(() => isLinkTag.value ? undefined : props.type)
     const buttonAttributesComputed = computed(() => {
       const disabledAttributes = {
@@ -145,13 +140,15 @@ export default defineComponent({
       }
     })
 
+    const attributesComputed = computed(() => ({ ...linkAttributesComputed.value, ...buttonAttributesComputed.value }))
+
     // states
     const button: ShallowRef<HTMLElement | undefined> = ref()
-    const { isFocused } = useFocus(button)
+    const { isFocused, focus, blur } = useFocus(button)
     const { isHovered } = useHover(button)
     const { isPressed } = usePressed(button)
 
-    // icons attributes
+    // icon attributes
     const iconColorComputed = computed(() => props.iconColor ? getColor(props.iconColor) : textColorComputed.value)
     const iconAttributesComputed = computed(() => ({
       size: props.size,
@@ -167,7 +164,9 @@ export default defineComponent({
       'va-button--small': props.size === 'small',
       'va-button--normal': !props.size || props.size === 'medium',
       'va-button--plain': props.plain,
-      'va-button--round': props.round && (!slots.default && isOneIcon.value),
+      'va-button--opacity': props.textOpacity < 1,
+      'va-button--icon-only': !slots.default && isOneIcon.value,
+      'va-button--round': props.round && !isSlotContentPassed.value && isOneIcon.value,
       'va-button--bordered': !!props.borderColor,
       'va-button--no-label': !isSlotContentPassed.value,
       'va-button--space-between-items': props.spaceBetweenItems,
@@ -178,77 +177,95 @@ export default defineComponent({
     }))
 
     // background color
-    const gradientBgColorComputed = computed(() => getGradientBackground(bgColorComputed.value))
+    const backgroundColorComputed = computed(() => (
+      props.gradient
+        ? getGradientBackground(colorComputed.value)
+        : colorComputed.value
+    ))
+
+    const getOpacityStateBackground = (stateOpacity: number) => ({
+      background: props.gradient
+        ? backgroundColorComputed.value
+        : colorToRgba(backgroundColorComputed.value, stateOpacity),
+    })
 
-    const backGroundColorComputed = computed(() => props.gradient
-      ? gradientBgColorComputed.value
-      : bgColorComputed.value)
+    const getStateBackground = (maskColor: string, stateOpacity: number, stateBehaviour: string) => {
+      return stateBehaviour === 'opacity'
+        ? { ...getOpacityStateBackground(stateOpacity) }
+        : { background: getStateMaskGradientBackground(colorComputed.value, maskColor, stateOpacity) }
+    }
 
     const hoverBackgroundComputed = computed(() => {
-      if (!props.backgroundColor) { return { background: 'transparent' } }
-
-      if (props.hoverBehaviour === 'opacity') {
-        return {
-          [props.gradient ? 'background' : 'backgroundColor']: backGroundColorComputed.value,
-          backgroundOpacity: props.hoverOpacity,
-        }
-      } else {
-        return {
-          background: getGradientBackground(bgColorComputed.value, props.hoverGradientMask),
-        }
-      }
+      return getStateBackground(props.hoverMaskColor, props.hoverOpacity, props.hoverBehaviour)
     })
 
     const pressedBackgroundComputed = computed(() => {
-      if (!props.backgroundColor) { return { background: 'transparent' } }
-
-      if (props.pressedBehaviour === 'opacity') {
-        return {
-          [props.gradient ? 'background' : 'backgroundColor']: backGroundColorComputed.value,
-          backgroundOpacity: props.pressedOpacity,
-        }
-      } else {
-        return {
-          background: getGradientBackground(bgColorComputed.value, props.pressedGradientMask),
-        }
-      }
+      return getStateBackground(props.pressedMaskColor, props.pressedOpacity, props.pressedBehaviour)
     })
 
     const backgroundComputed = computed(() => {
-      if (!props.backgroundColor && !isHovered.value && !isPressed.value) { return { background: 'transparent' } }
-
-      if (isHovered.value) { return hoverBackgroundComputed.value }
-
+      if (isTransparentBg.value) { return { background: 'transparent' } }
       if (isPressed.value) { return pressedBackgroundComputed.value }
+      if (isHovered.value) { return hoverBackgroundComputed.value }
 
-      return { [props.gradient ? 'background' : 'backgroundColor']: backGroundColorComputed.value }
+      return { ...getOpacityStateBackground(props.backgroundOpacity) }
     })
 
     // content color
-    const { textColorComputed } = useTextColor(colorComputed, !!props.backgroundColor)
-    const contentColorComputed = computed(() => {
-      if (props.backgroundColor) { return textColorComputed.value }
+    const plainColorStyles = computed(() => ({
+      color: 'transparent',
+      '-webkit-background-clip': 'text',
+      'background-clip': 'text',
+      background: textColorComputed.value,
+      opacity: getPlainTextOpacity.value,
+    }))
 
-      if (isHovered.value && props.hoverOpacity) {
-        return colorToRgba(textColorComputed.value, props.hoverOpacity)
-      }
+    const getStateColor = (maskColor: string, stateOpacity: number, stateBehaviour: string) => {
+      const res = stateBehaviour === 'opacity'
+        ? { color: colorToRgba(textColorComputed.value, stateOpacity) }
+        : { background: getStateMaskGradientBackground(colorComputed.value, maskColor, stateOpacity) }
+      return { ...plainColorStyles.value, ...res }
+    }
 
-      if (isPressed.value && props.pressedOpacity) {
-        return colorToRgba(textColorComputed.value, props.pressedOpacity)
-      }
+    const hoverTextColorComputed = computed(() => {
+      return getStateColor(props.hoverMaskColor, props.hoverOpacity, props.hoverBehaviour)
+    })
 
-      return textColorComputed.value
+    const pressedTextColorComputed = computed(() => {
+      return getStateColor(props.pressedMaskColor, props.pressedOpacity, props.pressedBehaviour)
     })
 
-    // final styles object
-    const computedStyle = computed(() => {
-      return {
-        color: contentColorComputed.value,
-        borderColor: props.borderColor ? getColor(props.borderColor) : 'inherit',
-        ...backgroundComputed.value,
+    const { textColorComputed } = useTextColor(
+      colorComputed,
+      isTransparentBg.value || isLightBackground(colorComputed.value, props.backgroundOpacity),
+    )
+
+    const getPlainTextOpacity = computed(() => {
+      if (props.disabled) { return undefined }
+      if (props.textOpacity === 1 || (isHovered.value && !isPressed.value)) { return 1 }
+      return isPressed.value ? 0.9 : props.textOpacity
+    })
+
+    const contentColorComputed = computed(() => {
+      const defaultColorStyles = {
+        color: textColorComputed.value,
       }
+
+      props.plain && Object.assign(defaultColorStyles, plainColorStyles.value)
+
+      if (!isTransparentBg.value) { return defaultColorStyles }
+      if (isPressed.value) { return pressedTextColorComputed.value }
+      if (isHovered.value) { return hoverTextColorComputed.value }
+      return defaultColorStyles
     })
 
+    // styles object
+    const computedStyle = computed(() => ({
+      borderColor: props.borderColor ? getColor(props.borderColor) : 'transparent',
+      ...backgroundComputed.value,
+      ...contentColorComputed.value,
+    }))
+
     return {
       button,
       tagComputed,
@@ -256,10 +273,13 @@ export default defineComponent({
       computedStyle,
       textColorComputed,
       loaderSizeComputed,
+      attributesComputed,
       wrapperClassComputed,
       iconAttributesComputed,
-      linkAttributesComputed,
-      buttonAttributesComputed,
+
+      // exposed only for external usage
+      focus,
+      blur,
     }
   },
 })
@@ -270,34 +290,28 @@ export default defineComponent({
 @import '../../styles/resources';
 
 .va-button {
-
-  // check only this & then unused variables
+  position: relative;
+  margin: var(--va-button-margin);
+  padding: var(--va-button-padding);
   display: var(--va-button-display);
-  align-items: var(--va-button-align-items);
   justify-content: var(--va-button-justify-content);
+  align-items: var(--va-button-align-items);
   border: var(--va-button-border);
   background-image: var(--va-button-background-image);
   box-shadow: var(--va-button-box-shadow);
   font-family: var(--va-font-family);
-  text-decoration: none !important;
+  font-weight: var(--va-button-font-weight);
+  text-decoration: none;
   text-transform: initial;
-  cursor: pointer;
   transition: var(--va-button-transition);
-  background-color: var(--va-button-background-color);
-  vertical-align: middle;
   box-sizing: border-box;
-  font-weight: var(--va-button-font-weight);
-  margin: var(--va-button-margin);
-  padding: var(--va-button-padding);
-  position: relative;
+  cursor: pointer;
 
-  // checked
   &__content {
     height: 100%;
     display: flex;
     align-items: center;
 
-    // checked
     &__title,
     &__icon {
       display: flex;
@@ -307,13 +321,11 @@ export default defineComponent({
       white-space: nowrap;
     }
 
-    // checked
     &--loading {
       opacity: 0;
     }
   }
 
-  // checked
   &--small {
     @include va-button(var(--va-button-sm-content-py), var(--va-button-sm-content-px), var(--va-button-sm-font-size), var(--va-button-sm-line-height), var(--va-button-sm-border-radius));
 
@@ -325,27 +337,35 @@ export default defineComponent({
       padding: var(--va-button-sm-content-py) var(--va-button-sm-content-px);
     }
 
-    &.va-button--round {
+    &.va-button--icon-only {
       width: var(--va-button-sm-size);
       height: var(--va-button-sm-size);
+
+      & .va-button__content {
+        padding-right: var(--va-button-sm-content-px);
+        padding-left: var(--va-button-sm-content-px);
+      }
     }
 
     &.va-button--bordered {
       line-height: calc(var(--va-button-sm-line-height) - 2 * var(--va-button-bordered-border));
     }
 
+    .va-button__left-icon,
+    .va-button__right-icon {
+      // until we haven't size config for icons
+      font-size: var(--va-button-sm-line-height) !important;
+    }
+
     .va-button__left-icon {
-      margin-left: calc(var(--va-button-sm-content-px) / -2);
-      margin-right: calc(var(--va-button-space-between-items) / 2);
+      margin-right: var(--va-button-sm-icons-spacing);
     }
 
     .va-button__right-icon {
-      margin-left: calc(var(--va-button-space-between-items) / 2);
-      margin-right: calc(var(--va-button-sm-content-px) / -2);
+      margin-left: var(--va-button-sm-icons-spacing);
     }
   }
 
-  // checked
   &--normal {
     @include va-button(var(--va-button-content-py), var(--va-button-content-px), var(--va-button-font-size), var(--va-button-line-height), var(--va-button-border-radius));
 
@@ -358,55 +378,61 @@ export default defineComponent({
       line-height: var(--va-button-line-height);
     }
 
-    &.va-button--round {
+    &.va-button--icon-only {
       width: var(--va-button-size);
       height: var(--va-button-size);
+
+      & .va-button__content {
+        padding-right: var(--va-button-content-px);
+        padding-left: var(--va-button-content-px);
+      }
     }
 
     &.va-button--bordered {
       line-height: calc(var(--va-button-line-height) - 2 * var(--va-button-bordered-border));
     }
 
+    .va-button__left-icon,
+    .va-button__right-icon {
+      // until we haven't size config for icons
+      font-size: var(--va-button-line-height) !important;
+    }
+
     .va-button__left-icon {
-      margin-left: calc(var(--va-button-content-px) / -2);
-      margin-right: calc(var(--va-button-space-between-items) / 2);
+      margin-right: var(--va-button-icons-spacing);
     }
 
     .va-button__right-icon {
-      margin-left: calc(var(--va-button-space-between-items) / 2);
-      margin-right: calc(var(--va-button-content-px) / -2);
+      margin-left: var(--va-button-icons-spacing);
     }
   }
 
-  // checked
   &--plain {
-    padding: 0;
+    min-width: auto;
+    min-height: auto;
 
-    &__content {
+    & .va-button__content {
       padding: 0;
     }
   }
 
-  // checked
   &--round {
-    .va-button__content {
-      padding: 0;
-      border-radius: 50%;
-    }
+    border-radius: 50%;
   }
 
-  // checked
   &--bordered {
     border-width: var(--va-button-bordered-border);
     border-style: var(--va-button-bordered-style);
   }
 
-  // checked
   &.va-button--disabled {
     @include va-disabled;
   }
 
-  // checked
+  &.va-button--disabled.va-button--opacity {
+    opacity: 0.24;
+  }
+
   &--no-label {
     .va-button__left-icon,
     .va-button__right-icon {
@@ -415,7 +441,6 @@ export default defineComponent({
     }
   }
 
-  // checked
   &--space-between-items {
     .va-button__content > * {
       margin-right: calc(var(--va-button-space-between-items) / 2);
@@ -431,25 +456,19 @@ export default defineComponent({
     }
   }
 
-  // checked
   &--focused {
     @include focus-outline;
-
-    outline-offset: -2px;
   }
 
-  // checked
   &--loading {
     pointer-events: none;
   }
 
-  // checked
   &--block {
     display: flex;
     min-width: 100%;
   }
 
-  // checked
   &__loader {
     position: absolute;
     width: 100%;
diff --git a/packages/ui/src/components/va-button/_variables.scss b/packages/ui/src/components/va-button/_variables.scss
index f14a306286..18073d5f0c 100644
--- a/packages/ui/src/components/va-button/_variables.scss
+++ b/packages/ui/src/components/va-button/_variables.scss
@@ -8,7 +8,6 @@
   --va-button-border: 0;
   --va-button-font-weight: 600;
   --va-button-transition: background 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-  --va-button-background-color: #ffffff;
   --va-button-space-between-items: 0.25rem;
   --va-button-margin: 0;
   --va-button-padding: 0;
@@ -17,24 +16,25 @@
   --va-button-size: 2.25rem;
   --va-button-content-py: 0.5rem;
   --va-button-content-px: 0.75rem;
+  --va-button-only-icon-content-px: 0.5rem;
   --va-button-font-size: 0.9375rem;
   --va-button-letter-spacing: 0;
   --va-button-line-height: 1.25rem;
   --va-button-border-radius: 0.25rem;
+  --va-button-icons-spacing: 0.25rem;
 
   /* Small */
   --va-button-sm-size: 1.5rem;
   --va-button-sm-content-py: 0.25rem;
   --va-button-sm-content-px: 0.375rem;
+  --va-button-sm-only-icon-content-px: 0.25rem;
   --va-button-sm-font-size: 0.8125rem;
   --va-button-sm-letter-spacing: 0;
   --va-button-sm-line-height: 1rem;
   --va-button-sm-border-radius: 0.125rem;
+  --va-button-sm-icons-spacing: 0.125rem;
 
   /* Bordered */
   --va-button-bordered-border: 1px;
   --va-button-bordered-style: solid;
-
-  /* Plain */
-  --va-button-plain-border: 0;
 }
diff --git a/packages/ui/src/composables/useHover.ts b/packages/ui/src/composables/useHover.ts
index 3f8c7580ea..aa9e873338 100644
--- a/packages/ui/src/composables/useHover.ts
+++ b/packages/ui/src/composables/useHover.ts
@@ -1,4 +1,10 @@
-import { ref, watch, onMounted, onBeforeUnmount, Ref } from 'vue'
+import { PropType, ref, Ref, watch } from 'vue'
+
+export const useHoverProps = {
+  hoverBehaviour: { type: String as PropType<'opacity' | 'gradient'>, default: 'gradient' },
+  hoverOpacity: { type: Number, default: 0.15 },
+  hoverMaskColor: { type: String, default: '#ffffff' },
+}
 
 const getEl = (el: any) => el.$el !== undefined ? el.$el : el
 
@@ -23,9 +29,5 @@ export function useHover (el?: Ref<HTMLElement | null | undefined>) {
     })
   }
 
-  return {
-    isHovered,
-    onMouseEnter,
-    onMouseLeave,
-  }
+  return { isHovered, onMouseEnter, onMouseLeave }
 }
diff --git a/packages/ui/src/composables/usePressed.ts b/packages/ui/src/composables/usePressed.ts
index 0a70544d14..0e521b230d 100644
--- a/packages/ui/src/composables/usePressed.ts
+++ b/packages/ui/src/composables/usePressed.ts
@@ -1,36 +1,32 @@
-import { ref, onMounted, onBeforeUnmount, Ref } from 'vue'
+import { PropType, ref, Ref, onMounted, onBeforeUnmount } from 'vue'
 
-export function usePressed (
-  el?: Ref<HTMLElement | undefined>,
-) {
+export const usePressedProps = {
+  pressedBehaviour: { type: String as PropType<'opacity' | 'gradient'>, default: 'gradient' },
+  pressedOpacity: { type: Number, default: 0.13 },
+  pressedMaskColor: { type: String, default: '#000000' },
+}
+
+export function usePressed (el?: Ref<HTMLElement | undefined>) {
   const isPressed = ref(false)
 
-  const onMouseDown = () => {
-    isPressed.value = true
-  }
+  const onMouseDown = () => { isPressed.value = true }
 
-  const onMouseUp = () => {
-    isPressed.value = false
-  }
+  const onMouseUp = () => { isPressed.value = false }
 
-  if (el) {
-    onMounted(() => {
-      if (el?.value instanceof HTMLElement) {
-        el.value?.addEventListener('mousedown', onMouseDown)
-        el.value?.addEventListener('mouseup', onMouseUp)
-      }
-    })
-    onBeforeUnmount(() => {
-      if (el?.value instanceof HTMLElement) {
-        el.value?.removeEventListener('mousedown', onMouseDown)
-        el.value?.removeEventListener('mouseup', onMouseUp)
-      }
-    })
-  }
+  onMounted(() => {
+    if (el?.value instanceof HTMLElement) {
+      el.value?.addEventListener('mousedown', onMouseDown)
+      el.value?.addEventListener('mouseup', onMouseUp)
+      el.value?.addEventListener('mouseleave', onMouseUp)
+    }
+  })
+  onBeforeUnmount(() => {
+    if (el?.value instanceof HTMLElement) {
+      el.value?.removeEventListener('mousedown', onMouseDown)
+      el.value?.removeEventListener('mouseup', onMouseUp)
+      el.value?.addEventListener('mouseleave', onMouseUp)
+    }
+  })
 
-  return {
-    isPressed,
-    onMouseDown,
-    onMouseUp,
-  }
+  return { isPressed, onMouseDown, onMouseUp }
 }
diff --git a/packages/ui/src/services/color-config/color-functions.ts b/packages/ui/src/services/color-config/color-functions.ts
index 1c0e011dc9..990f93344b 100644
--- a/packages/ui/src/services/color-config/color-functions.ts
+++ b/packages/ui/src/services/color-config/color-functions.ts
@@ -9,10 +9,13 @@ export const colorToRgba = (color: ColorInput, opacity: number) => {
   return new ColorTranslator(color).setA(opacity).RGBA
 }
 
-export const getTextColor = (color: ColorInput, darkColor = 'dark', lightColor = 'white') => {
+export const isLightBackground = (color: ColorInput, opacity = 1) => {
   const { R, G, B } = new ColorTranslator(color)
-  const isLightBackground = Math.sqrt(R * R * 0.241 + G * G * 0.691 + B * B * 0.068) > 130
-  return isLightBackground ? darkColor : lightColor
+  return opacity < 0.6 || Math.sqrt(R * R * 0.241 + G * G * 0.691 + B * B * 0.068) > 130
+}
+
+export const getTextColor = (color: ColorInput, darkColor = 'dark', lightColor = 'white') => {
+  return isLightBackground(color) ? darkColor : lightColor
 }
 
 export const getBoxShadowColor = (color: ColorInput) => {
@@ -94,13 +97,19 @@ export const shiftGradientColor = (color: ColorInput): string => {
   throw new Error('This method should handle all colors. But it didn\'t for some reason.')
 }
 
-export const getGradientBackground = (color: string, colorStart?: string) => {
-  const colorLeft = shiftGradientColor(colorStart || color)
+export const getGradientBackground = (color: string) => {
+  const colorLeft = shiftGradientColor(color)
   const colorRight = ColorTranslator.toHSLA(color)
 
   return `linear-gradient(to right, ${colorLeft}, ${colorRight})`
 }
 
+export const getStateMaskGradientBackground = (color: string, maskColor: string, maskOpacity: number) => {
+  const mask = colorToRgba(maskColor, maskOpacity)
+
+  return `linear-gradient(0deg, ${mask}, ${mask}), ${color}`
+}
+
 /**
  * Check if color is valid hsl, hsla, rga, rgba or hex color
  * Taken from https://www.regextester.com/103656
diff --git a/packages/ui/src/services/color-config/color-theme-presets.ts b/packages/ui/src/services/color-config/color-theme-presets.ts
index 86cb8f4c30..8724ff5056 100644
--- a/packages/ui/src/services/color-config/color-theme-presets.ts
+++ b/packages/ui/src/services/color-config/color-theme-presets.ts
@@ -18,7 +18,7 @@ type VuesticColorsPreset = {
 
 export const colorsPresets: Record<string, VuesticColorsPreset> = {
   default: {
-    primary: '#2C82E0',
+    primary: '#154ec1',
     secondary: '#767C88',
     background: '#f4f8fa',
     success: '#40e583',