diff --git a/app/components/content/ButtonLink.vue b/app/components/content/ButtonLink.vue
index 007fc7d..f003e00 100644
--- a/app/components/content/ButtonLink.vue
+++ b/app/components/content/ButtonLink.vue
@@ -1,101 +1,25 @@
 <template>
+  <div class="flex flex-row items-center mt-2 mb-2">
   <NuxtLink :to="to || href" :target="(blank && '_blank') || target">
-    <UButton 
-      :variant="variant" 
-      :size="size"
-      class="button-link"
-    >
-      <SmartIcon v-if="leftIcon" :name="leftIcon" class="icon-left" />
-      <slot />
-      <SmartIcon v-if="rightIcon" :name="rightIcon" class="icon-right" />
+    <UButton :variant="variant" :size="size" :icon="icon" :trailing-icon="trailingIcon" class="min-h-10 max-h-12">
+      <slot/>
     </UButton>
   </NuxtLink>
+</div>
 </template>
 
 <script setup lang="ts">
+type Target = '_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined;
+
 defineProps<{
   variant?: 'solid' | 'outline' | 'ghost' | 'link' | 'soft';
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  leftIcon?: string;
-  rightIcon?: string;
+  color?: 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white' | 'black';
+  icon?: string;
   to?: string;
   href?: string;
-  target?: string;
+  target?: Target;
+  trailingIcon?: string;
   blank?: boolean;
 }>();
 </script>
-
-<style scoped>
-.button-link {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.2rem;
-  padding: 0.3rem;
-  border-radius: 0.5rem;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  transition: all 0.2s ease;
-  text-decoration: none;
-
-}
-
-.button-link:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-
-.button-link:active {
-  transform: translateY(0);
-}
-
-/* 实心按钮样式（蓝色按钮） */
-:deep(.u-button--solid) {
-  background-color: #3b82f6;
-  color: white;
-  border-color: #3b82f6;
-}
-
-:deep(.u-button--solid:hover) {
-  background-color: #2563eb;
-  border-color: #2563eb;
-}
-
-/* 边框按钮样式（GitHub按钮） */
-:deep(.u-button--outline) {
-  background-color: white;
-  color: #3b82f6;
-  border-color: #3b82f6;
-}
-
-:deep(.u-button--outline:hover) {
-  background-color: #eff6ff;
-  border-color:var(--primary);
-}
-
-/* 图标按钮样式（Ghost图标） */
-:deep(.u-button--ghost) {
-  background-color: transparent;
-  color: #3b82f6;
-  border-color: transparent;
-  padding: 0.5rem;
-}
-
-:deep(.u-button--ghost:hover) {
-  background-color: #eff6ff;
-  color: #2563eb;
-}
-
-.icon-left {
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-}
-
-.icon-right {
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-}
-</style>