Animated Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!-- Arrow Button - Slide Right -->
<button class="group px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg flex items-center gap-2 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all">
  <span>Shop Now</span>
  <svg class="w-5 h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
  </svg>
</button>

<!-- Arrow Button - Slide Left -->
<button class="group px-6 py-2.5 bg-gray-800 text-white font-medium rounded-lg flex items-center gap-2 hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-all">
  <svg class="w-5 h-5 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18"/>
  </svg>
  <span>Go Back</span>
</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# Animated Button

Interactive button animations including loading states, hover effects, and transitions.

## Variants

| Variant | Description |
|---------|-------------|
| [Loading](./loading/) | Loading spinner animations |
| [Arrow](./arrow/) | Arrow slide animations |
| [Icon](./icon/) | Icon animations on hover |
| [Scale](./scale/) | Scale transformations |
| [Shine](./shine/) | Shine sweep effects |

## Quick Start

```html
<!-- Loading Button -->
<style>
  @keyframes spin { to { transform: rotate(360deg); } }
  .animate-spin-fast { animation: spin 1s linear infinite; }
</style>
<button class="px-6 py-2.5 bg-blue-600 text-white rounded-lg flex items-center gap-2" disabled>
  <svg class="w-5 h-5 animate-spin-fast" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  </svg>
  Loading...
</button>
```

## Related

- [Basic Button](../basic-button/) - Core button styles
- [Loading Button](../loading-button/) - Dedicated loading components