diff --git a/docs/components/button.md b/docs/components/button.md
index f8c0631bc..33ae19a50 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -54,6 +54,26 @@ The `VBtn` component is registered globally when you install with `@gits-id/ui`.
 </template>
 ```
 
+### Flush
+
+- **Prop**: `flush`
+- **Type**: `boolean`
+- **Default Value**: `false`
+
+Use `flush` prop to remove button padding. It will also set the width and height button to `auto`;
+
+```vue
+<template>
+  <VBtn text flush> default </VBtn>
+  <VBtn color="primary" text flush> primary </VBtn>
+  <VBtn color="secondary" text flush> secondary </VBtn>
+  <VBtn color="info" text flush> info </VBtn>
+  <VBtn color="warning" text flush> warning </VBtn>
+  <VBtn color="error" text flush> error </VBtn>
+  <VBtn color="dark" text flush> dark </VBtn>
+</template>
+```
+
 <LivePreview src="forms-button--text" />
 
 ### Rounded
diff --git a/packages/button/src/VBtn.stories.ts b/packages/button/src/VBtn.stories.ts
index 209912d45..1cd9c8463 100644
--- a/packages/button/src/VBtn.stories.ts
+++ b/packages/button/src/VBtn.stories.ts
@@ -102,6 +102,16 @@ Tile.parameters = {
   },
 };
 
+export const Flush = Template.bind({});
+Flush.args = {color: 'primary', flush: true, text: true};
+Flush.parameters = {
+  docs: {
+    source: {
+      code: '<v-btn color="primary" flush text>Button</v-btn>',
+    },
+  },
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {color: 'primary', disabled: true};
 Disabled.parameters = {
diff --git a/packages/button/src/VBtn.vue b/packages/button/src/VBtn.vue
index 3038f033b..a56e1b0fd 100644
--- a/packages/button/src/VBtn.vue
+++ b/packages/button/src/VBtn.vue
@@ -44,6 +44,7 @@ export interface Props {
   suffixIconSize?: string;
   suffixIconClass?: string;
   loadingClass?: string;
+  flush?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -100,6 +101,7 @@ const classes = computed(() => {
       'btn--block': props.block,
       'btn--loading': props.loading,
       'btn--text': props.text,
+      'btn--flush': props.flush,
       shadow: props.shadow,
     },
   ];
diff --git a/packages/dropdown/src/Dropdown.vue b/packages/dropdown/src/Dropdown.vue
index db9c9bfce..509ce1ee0 100644
--- a/packages/dropdown/src/Dropdown.vue
+++ b/packages/dropdown/src/Dropdown.vue
@@ -38,7 +38,7 @@ withDefaults(defineProps<Props>(), {
   buttonWrapperClass: '',
   leftClass: 'left-0',
   rightClass: 'right-0',
-  transition: 'fade',
+  transition: 'fade-scale',
   icon: 'ri:arrow-down-s-line',
   iconSize: 'sm',
   iconClass: '',
diff --git a/packages/tailwind-components/src/button.js b/packages/tailwind-components/src/button.js
index 29680b29c..237de00f0 100644
--- a/packages/tailwind-components/src/button.js
+++ b/packages/tailwind-components/src/button.js
@@ -90,10 +90,13 @@ const btn = plugin(function ({addComponents, theme}) {
       borderRadius: 'var(--btn-border-radius)',
       borderWidth: 'var(--btn-border-width)',
       borderColor: 'var(--btn-border-color)',
-      padding: 'var(--btn-padding-y) var(--btn-padding-x)',
       transition: 'var(--btn-transition)',
-      width: 'var(--btn-width)',
-      height: 'var(--btn-height)',
+
+      '&:not(.btn--flush)': {
+        padding: 'var(--btn-padding-y) var(--btn-padding-x)',
+        width: 'var(--btn-width)',
+        height: 'var(--btn-height)',
+      },
 
       // disabled
       '&:disabled': disabledVariant(),
@@ -126,6 +129,12 @@ const btn = plugin(function ({addComponents, theme}) {
       ...colorVariant('error'),
     },
 
+    // flush
+    '.btn--flush': {
+      padding: 0,
+      '--btn-height': 'auto',
+    },
+
     // outlined
     '.btn--outlined': {
       '&:disabled': {
diff --git a/packages/theme/transition.css b/packages/theme/transition.css
index dd59b15e5..c908f85ad 100644
--- a/packages/theme/transition.css
+++ b/packages/theme/transition.css
@@ -9,6 +9,18 @@
   opacity: 0;
 }
 
+/* fade scale */
+.fade-scale-enter-active,
+.fade-scale-leave-active {
+  transition: all 0.3s ease;
+}
+
+.fade-scale-enter-from,
+.fade-scale-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
 /* slide-left */
 .slide-left-enter-active,
 .slide-left-leave-active {