About this set
Six call-to-action buttons built on CSS gradients. Four are solid two-colour fills: indigo to purple, rose to burnt orange, teal to emerald and a dark slate, each with a coloured shadow that appears when the button lifts 2 pixels on hover. The fifth has a gradient border around a white face, drawn with two background layers, a white one clipped to the padding box over a gradient clipped to the border box, so it needs no extra element and survives any parent background. The sixth, Animated flow, slides a 300 percent wide gradient across the button in a four second loop. Use the solid fills for primary actions, the bordered one as a secondary action next to them, and the animated one sparingly, for a single launch or promo button. All six are plain button elements with type=”button”, so they work with a keyboard and in forms without any script. Gradient stops were darkened where needed so the white labels reach 4.5:1 across the whole gradient. The Bootstrap version sets the size and colours through –bs-btn-* variables on .btn, and the Tailwind version uses arbitrary gradient values.
What’s included
- Four two-colour gradient fills with a tinted hover shadow
- Gradient border made from two background layers, no pseudo-element
- Animated flow gradient that stops under reduced motion
- White labels at 4.5:1 or better across every gradient
- Plain CSS, Bootstrap .btn and Tailwind versions of the same design
Accessibility
Every control is a native button with visible text, so it is announced by name and works with Tab, Enter and Space. Keyboard focus draws a 2px indigo outline 3px outside the button. Under prefers-reduced-motion the hover lift, its transition and the flowing gradient are all switched off.
Customise it
In plain CSS change the linear-gradient stops on .gb-indigo, .gb-sunset and the other modifiers, and --gb-glow for the hover shadow. In Bootstrap edit the same gradients on the .btn-gb-* classes and --bs-btn-padding-x/-y for size; in Tailwind edit the bg-[linear-gradient(...)] and hover:shadow-[...] utilities.
