The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<a class="shine-btn" href="#">Get started <span aria-hidden="true">&rarr;</span></a>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Create a call-to-action button with a "shine" hover effect using only HTML and CSS.

Requirements:
- An <a> styled as a pill: indigo #2506ad background, white bold text, 16px 34px padding, soft indigo shadow. Text "Get started" followed by a right arrow.
- position: relative and overflow: hidden on the button.
- A ::before pseudo-element: 50% wide, full height, a linear-gradient that goes transparent -> white at 45% opacity -> transparent, skewed -20deg, starting at left: -75% (outside the button).
- On hover, transition the pseudo-element's left to 125% over 0.6s so the streak sweeps across; also lift the button 2px, deepen the shadow and nudge the arrow 4px right.
- A visible orange focus-visible outline for keyboard users.
- Centre it on a light grey page.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Style a normal pill button and add position: relative with overflow: hidden. The overflow rule clips the streak to the button's shape.

2. 2

   Create the streak with a ::before pseudo-element filled by a transparent-white-transparent gradient.

3. 3

   Skew it with transform: skewX(-20deg) so it looks like a slanted reflection.

4. 4

   Park it outside the left edge (left: -75%) and move it past the right edge on hover with a transition on left.

5. 5

   Add small supporting motion: lift the button and slide the arrow.

Customisation tips

• Loop the shine automatically with a keyframe animation to draw attention to a primary action.
• Change the button colour freely; the white streak works on any saturated background.
• Use a button element instead of a link when the action does not navigate.

More components