پیش فرض
- html
<!-- Primary -->
<button type="button"
class="inline-flex items-center justify-center h-10 bg-primary border border-primary rounded-lg text-primary-foreground cursor-pointer outline-hidden group/button transition-transform active:scale-95 px-6">
<span class="font-semibold text-xs">اصلی</span>
</button>
<!-- Accent -->
<button type="button"
class="inline-flex items-center justify-center h-10 bg-accent border border-accent rounded-lg text-accent-foreground cursor-pointer outline-hidden group/button transition-transform active:scale-95 px-6">
<span class="font-semibold text-xs">تأکیدی</span>
</button>
<!-- Info -->
<button type="button"
class="inline-flex items-center justify-center h-10 bg-info border border-info rounded-lg text-info-foreground cursor-pointer outline-hidden group/button transition-transform active:scale-95 px-6">
<span class="font-semibold text-xs">اطلاعاتی</span>
</button>
<!-- Success -->
<button type="button"
class="inline-flex items-center justify-center h-10 bg-success border border-success rounded-lg text-success-foreground cursor-pointer outline-hidden group/button transition-transform active:scale-95 px-6">
<span class="font-semibold text-xs">موفقیت</span>
</button>
<!-- Warning -->
<button type="button"
class="inline-flex items-center justify-center h-10 bg-warning border border-warning rounded-lg text-warning-foreground cursor-pointer outline-hidden group/button transition-transform active:scale-95 px-6">
<span class="font-semibold text-xs">هشدار</span>
</button>
<!-- Destructive -->
<button type="button"
class="inline-flex items-center justify-center h-10 bg-destructive border border-destructive rounded-lg text-destructive-foreground cursor-pointer outline-hidden group/button transition-transform active:scale-95 px-6">
<span class="font-semibold text-xs">خطرناک</span>
</button>
<!-- Foreground -->
<button type="button"
class="inline-flex items-center justify-center h-10 bg-foreground border border-foreground rounded-lg text-background cursor-pointer outline-hidden group/button transition-transform active:scale-95 px-6">
<span class="font-semibold text-xs">معکوس</span>
</button>
<!-- Ghost -->
<button type="button"
class="inline-flex items-center justify-center h-10 bg-transparent border border-transparent rounded-lg text-muted-foreground cursor-pointer outline-hidden group/button transition-transform hover:text-foreground hover:bg-muted active:scale-95 px-6">
<span class="font-semibold text-xs">شفاف</span>
</button>
<!-- Link -->
<button type="button"
class="inline-flex items-center justify-center h-10 bg-transparent border border-transparent rounded-lg underline text-muted-foreground cursor-pointer outline-hidden group/button transition-transform hover:text-primary active:scale-95 px-6">
<span class="font-semibold text-xs">پیوند</span>
</button>با مرز متحرک
- app.css
- html
@property --border-angle {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
@theme {
--animate-rotate-border: border-rotate 8s linear infinite;
@keyframes border-rotate {
to {
--border-angle: 360deg;
}
}
}<!-- Animated border --primary -->
<div
class="inline-flex animate-rotate-border rounded-full bg-conic/[from_var(--border-angle)] from-background to-primary from-80% to-100% border shadow p-0.5">
<button type="button"
class="flex items-center justify-center gap-x-2 w-full h-10 rounded-full font-semibold text-primary-foreground bg-primary cursor-pointer px-8">
<span class="font-medium text-xs">
خط رو دنبال کن
</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="size-4">
<path fill="currentColor"
d="M27.87 4.423c.131.284.352.508.644.635l1.215.527a.453.453 0 0 1 0 .83l-1.205.527a1.22 1.22 0 0 0-.643.635l-.954 2.167c-.17.341-.683.341-.854 0l-.954-2.167a1.26 1.26 0 0 0-.643-.635l-1.205-.527a.453.453 0 0 1 0-.83l1.205-.527a1.22 1.22 0 0 0 .643-.635l.954-2.167c.17-.341.683-.341.854 0zm-11.887.742a.9.9 0 0 0 .458.438l.864.36c.26.117.26.457 0 .574l-.864.36a.85.85 0 0 0-.458.438l-.676 1.49c-.125.233-.49.233-.614 0l-.676-1.49a.9.9 0 0 0-.458-.438l-.864-.36a.309.309 0 0 1 0-.574l.864-.36a.85.85 0 0 0 .458-.438l.676-1.49c.125-.233.49-.233.614 0zM4 26l-1.662 1.627a1.146 1.146 0 0 0 0 1.625l.41.41c.44.452 1.17.452 1.61-.01L6 28.007l-.003-.003L20 14l1.674-1.667c.435-.445.435-1.24 0-1.675l-.33-.331C20.9 9.89 20 10 19.5 10.5zm21.95-9.702a.95.95 0 0 1-.46-.48l-.685-1.622c-.128-.261-.492-.261-.61 0l-.685 1.623a.95.95 0 0 1-.46.479l-.857.392c-.257.13-.257.5 0 .62l.856.392a.95.95 0 0 1 .46.48l.686 1.622c.128.261.492.261.61 0l.685-1.622a.95.95 0 0 1 .46-.48l.857-.392c.257-.13.257-.5 0-.62zM12 14a1 1 0 1 0 0-2a1 1 0 0 0 0 2m18-1a1 1 0 1 1-2 0a1 1 0 0 1 2 0M19 4a1 1 0 1 0 0-2a1 1 0 0 0 0 2m1 17a1 1 0 1 1-2 0a1 1 0 0 1 2 0" />
</svg>
</button>
</div><!-- end Animated border --primary -->
<!-- Animated border --destructive -->
<div
class="inline-flex animate-rotate-border rounded-full bg-conic/[from_var(--border-angle)] from-background to-destructive from-80% to-100% border shadow p-0.5">
<button type="button"
class="flex items-center justify-center gap-x-2 w-full h-10 rounded-full font-semibold text-destructive-foreground bg-destructive cursor-pointer px-8">
<span class="font-medium text-xs">
خط رو دنبال کن
</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="size-4">
<path fill="currentColor"
d="M27.87 4.423c.131.284.352.508.644.635l1.215.527a.453.453 0 0 1 0 .83l-1.205.527a1.22 1.22 0 0 0-.643.635l-.954 2.167c-.17.341-.683.341-.854 0l-.954-2.167a1.26 1.26 0 0 0-.643-.635l-1.205-.527a.453.453 0 0 1 0-.83l1.205-.527a1.22 1.22 0 0 0 .643-.635l.954-2.167c.17-.341.683-.341.854 0zm-11.887.742a.9.9 0 0 0 .458.438l.864.36c.26.117.26.457 0 .574l-.864.36a.85.85 0 0 0-.458.438l-.676 1.49c-.125.233-.49.233-.614 0l-.676-1.49a.9.9 0 0 0-.458-.438l-.864-.36a.309.309 0 0 1 0-.574l.864-.36a.85.85 0 0 0 .458-.438l.676-1.49c.125-.233.49-.233.614 0zM4 26l-1.662 1.627a1.146 1.146 0 0 0 0 1.625l.41.41c.44.452 1.17.452 1.61-.01L6 28.007l-.003-.003L20 14l1.674-1.667c.435-.445.435-1.24 0-1.675l-.33-.331C20.9 9.89 20 10 19.5 10.5zm21.95-9.702a.95.95 0 0 1-.46-.48l-.685-1.622c-.128-.261-.492-.261-.61 0l-.685 1.623a.95.95 0 0 1-.46.479l-.857.392c-.257.13-.257.5 0 .62l.856.392a.95.95 0 0 1 .46.48l.686 1.622c.128.261.492.261.61 0l.685-1.622a.95.95 0 0 1 .46-.48l.857-.392c.257-.13.257-.5 0-.62zM12 14a1 1 0 1 0 0-2a1 1 0 0 0 0 2m18-1a1 1 0 1 1-2 0a1 1 0 0 1 2 0M19 4a1 1 0 1 0 0-2a1 1 0 0 0 0 2m1 17a1 1 0 1 1-2 0a1 1 0 0 1 2 0" />
</svg>
</button>
</div><!-- end Animated border --destructive -->
<!-- Animated border --warning -->
<div
class="inline-flex animate-rotate-border rounded-full bg-conic/[from_var(--border-angle)] from-background to-warning from-80% to-100% border shadow p-0.5">
<button type="button"
class="flex items-center justify-center gap-x-2 w-full h-10 rounded-full font-semibold text-warning-foreground bg-warning cursor-pointer px-8">
<span class="font-medium text-xs">
خط رو دنبال کن
</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="size-4">
<path fill="currentColor"
d="M27.87 4.423c.131.284.352.508.644.635l1.215.527a.453.453 0 0 1 0 .83l-1.205.527a1.22 1.22 0 0 0-.643.635l-.954 2.167c-.17.341-.683.341-.854 0l-.954-2.167a1.26 1.26 0 0 0-.643-.635l-1.205-.527a.453.453 0 0 1 0-.83l1.205-.527a1.22 1.22 0 0 0 .643-.635l.954-2.167c.17-.341.683-.341.854 0zm-11.887.742a.9.9 0 0 0 .458.438l.864.36c.26.117.26.457 0 .574l-.864.36a.85.85 0 0 0-.458.438l-.676 1.49c-.125.233-.49.233-.614 0l-.676-1.49a.9.9 0 0 0-.458-.438l-.864-.36a.309.309 0 0 1 0-.574l.864-.36a.85.85 0 0 0 .458-.438l.676-1.49c.125-.233.49-.233.614 0zM4 26l-1.662 1.627a1.146 1.146 0 0 0 0 1.625l.41.41c.44.452 1.17.452 1.61-.01L6 28.007l-.003-.003L20 14l1.674-1.667c.435-.445.435-1.24 0-1.675l-.33-.331C20.9 9.89 20 10 19.5 10.5zm21.95-9.702a.95.95 0 0 1-.46-.48l-.685-1.622c-.128-.261-.492-.261-.61 0l-.685 1.623a.95.95 0 0 1-.46.479l-.857.392c-.257.13-.257.5 0 .62l.856.392a.95.95 0 0 1 .46.48l.686 1.622c.128.261.492.261.61 0l.685-1.622a.95.95 0 0 1 .46-.48l.857-.392c.257-.13.257-.5 0-.62zM12 14a1 1 0 1 0 0-2a1 1 0 0 0 0 2m18-1a1 1 0 1 1-2 0a1 1 0 0 1 2 0M19 4a1 1 0 1 0 0-2a1 1 0 0 0 0 2m1 17a1 1 0 1 1-2 0a1 1 0 0 1 2 0" />
</svg>
</button>
</div><!-- end Animated border --warning -->