样式1a :hrefi18nPath(message) classgroup relative inline-flex items-center justify-center gap-3 overflow-hidden rounded-md border-2 border-primary bg-transparent px-8 py-3.5 text-base font-semibold text-primary transition-all duration-300 hover:text-white !-- 背景填充层从左侧平滑展开 -- span classabsolute inset-0 origin-left scale-x-0 bg-primary transition-transform duration-300 ease-out group-hover:scale-x-100/span !-- 内容层 -- span classrelative z-10 flex items-center gap-3 span classtracking-wide{{ $t(detailsPage.getQuote) }}/span svg xmlnshttp://www.w3.org/2000/svg width20 height20 viewBox0 0 24 24 fillnone strokecurrentColor stroke-width2.5 stroke-linecapround stroke-linejoinround classtransition-transform duration-300 group-hover:translate-x-1.5 path dM5 12h14 / path dm12 5 7 7-7 7 / /svg /span /a样式2a :hrefi18nPath(message) classgroup relative inline-flex items-center gap-2 px-1 py-2 text-lg font-semibold text-primary transition-colors hover:text-primary/80 span classrelative {{ $t(detailsPage.getQuote) }} !-- 底部下划线Hover 时从左向右展开 -- span classabsolute -bottom-1 left-0 h-[2px] w-0 bg-primary transition-all duration-300 group-hover:w-full/span /span svg xmlnshttp://www.w3.org/2000/svg width20 height20 viewBox0 0 24 24 fillnone strokecurrentColor stroke-width2.5 stroke-linecapround stroke-linejoinround classtransition-transform duration-300 group-hover:translate-x-2 path dM5 12h14 / path dm12 5 7 7-7 7 / /svg /a样式3a :hrefi18nPath(message) classgroup relative inline-flex items-center justify-center gap-3 overflow-hidden rounded-full bg-primary px-8 py-3.5 text-base font-semibold text-white shadow-lg shadow-primary/20 transition-all duration-300 hover:shadow-xl hover:shadow-primary/30 !-- 流光扫过层 -- span classabsolute inset-0 -translate-x-full skew-x-[-20deg] bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-full/span !-- 内容层 -- span classrelative z-10 flex items-center gap-3 span{{ $t(detailsPage.getQuote) }}/span svg xmlnshttp://www.w3.org/2000/svg width20 height20 viewBox0 0 24 24 fillnone strokecurrentColor stroke-width2.5 stroke-linecapround stroke-linejoinround classtransition-transform duration-300 group-hover:translate-x-1.5 path dM5 12h14 / path dm12 5 7 7-7 7 / /svg /span /a样式4a :hrefi18nPath(message) classgroup relative inline-flex items-center justify-center gap-3 bg-primary px-10 py-4 text-base font-bold text-white transition-all duration-300 hover:shadow-[0_0_20px_rgba(74,144,226,0.4)] styleclip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); span classrelative z-10 flex items-center gap-3 !-- 增加字间距和全大写如果是英文增强工业感 -- span classtracking-widest uppercase{{ $t(detailsPage.getQuote) }}/span svg xmlnshttp://www.w3.org/2000/svg width20 height20 viewBox0 0 24 24 fillnone strokecurrentColor stroke-width2.5 stroke-linecapround stroke-linejoinround classtransition-transform duration-300 group-hover:translate-x-1.5 path dM5 12h14 / path dm12 5 7 7-7 7 / /svg /span /a
