Skip to content
Forge

Gradient pill button

A colorful pill crossed by a light sheen on hover.

  • Tailwind
  • React
  • CSS
  • WordPress
Open in a new tab

Description

The warm gradient draws the eye to the primary action; a diagonal sheen crosses it on hover and focus. Text stays readable across the whole gradient (AA contrast) and the sheen is removed when motion is reduced.

Code

Loading the code…

Archive contents

bouton-pilule-degrade-html-tailwind.zip3 files · 3 Ko

  • index.html2 Ko
  • README.md2 Ko
  • LICENSE.md1 Ko

Tags

Updated on October 13, 2026.

In the same spirit

  • Round icon buttons

    Free

    Circular icon buttons with an accessible tooltip on hover and focus.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Split button with menu

    Coming soon

    A primary action joined to a menu of secondary options.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Raised button

    Free

    A chunky button that sinks under the finger, for primary actions.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Animated underline link

    Free

    A text link whose underline draws from left to right on hover.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
Gradient pill button | Forge