Animated Shine 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
36
37
38
39
40
41

<!-- Shine Button Styles -->
<style>
  .shine-btn {
    position: relative;
    overflow: hidden;
  }
  .shine-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      to right,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    transform: rotate(30deg);
    transition: transform 0.6s;
  }
  .shine-btn:hover::after {
    transform: rotate(30deg) translateX(100%);
  }
</style>

<!-- Shine Button - Default -->
<button class="px-8 py-3 shine-btn bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors">
  Shine Effect
</button>

<!-- Shine Button - Pill -->
<button class="px-8 py-3 shine-btn bg-purple-600 text-white font-semibold rounded-full hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-colors">
  Shine Pill
</button>

<!-- Shine Button - Gradient -->
<button class="px-8 py-3 shine-btn bg-gradient-to-r from-cyan-500 to-blue-500 text-white font-semibold rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-cyan-500 transition-opacity">
  Shine Gradient
</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
36
37
38
39
40
41
42

# Animated Button Shine

Button with a shine / sweep highlight animation.

## Preview

Open `preview.html` for a standalone demonstration of this variant.

## Features

- Shine / sweep effect
- CSS transitions or keyframe animation
- Focus-visible states

## Usage

```bash
npx devsnips add Tailwind/Components/Buttons/animated-button/shine
```

Copy from `code.html`.

## Customization

- Shine gradient and animation timing
- Base colors and typography

## Accessibility

- Native `<button>`
- Prefer reduced-motion considerations if the animation is strong

## Dependencies

- Tailwind CSS only

## File Structure

- `code.html` — copy/paste snippet
- `preview.html` — standalone demo
- `metadata.json` — metadata
- `README.md` — this file