diff --git a/layers/components/atoms/Button/index.vue b/layers/components/atoms/Button/index.vue
index 146ead8..6547678 100644
--- a/layers/components/atoms/Button/index.vue
+++ b/layers/components/atoms/Button/index.vue
@@ -10,6 +10,7 @@ interface props {
   backgroundColor?: string
   textColor?: string
   disabled?: boolean
+  gradient?: boolean
 }
 
 const props = withDefaults(defineProps<props>(), {
@@ -19,6 +20,7 @@ const props = withDefaults(defineProps<props>(), {
   target: '_self',
   textColor: 'var(--alternative-02)',
   disabled: false,
+  gradient: false,
 })
 
 const componentTag = computed((): string => {
@@ -85,6 +87,7 @@ const componentProps = computed(() => {
     }"
     :disabled="props.disabled"
   >
+    <i v-if="props.gradient" class="btn-gradient"></i>
     <span class="btn-content">
       <slot />
       <AtomsIconsLongArrowRightLine
@@ -146,4 +149,13 @@ const componentProps = computed(() => {
 .btn-base.size-extra-small .btn-content {
   @apply gap-0.5;
 }
+
+.btn-gradient {
+  @apply absolute top-0 left-0 w-full h-full opacity-[0.7] mix-blend-soft-light;
+  background: radial-gradient(
+    68.19% 81.25% at 50.35% 100%,
+    #fff 20%,
+    rgba(255, 255, 255, 0) 100%
+  );
+}
 </style>
diff --git a/layers/components/widgets/ButtonList.vue b/layers/components/widgets/ButtonList.vue
index ab5b7ee..13d32f0 100644
--- a/layers/components/widgets/ButtonList.vue
+++ b/layers/components/widgets/ButtonList.vue
@@ -148,6 +148,7 @@ const handleButtonClick = (button: PageDataResourceGroup) => {
         :background-color="getColorCodeFromData(button.btn_info, 'btn')"
         :text-color="getColorCodeFromData(button.btn_info, 'txt')"
         :disabled="button.btn_info?.detail?.btn_type === 'DEACTIVE'"
+        :gradient="true"
         @click="handleButtonClick(button)"
       >
         {{ button.btn_info?.txt_btn_name }}