This is the more refined version of the basic rectangular button. The background color still changes on hover, but now it does so smoothly—giving the button (and your site) a more responsive, polished feel.

It’s all thanks to a single rule:

transition: background-color 200ms linear;

This tells the browser to animate any change in background color. Including it in both the base and hover states ensures a smooth transition in both directions.

A gentle fade is nice, but what if you want your hover color to slide in with flair? This effect is surprisingly simple—and can give your buttons a distinctive, eye-catching feel.

Here, the slide is created using an inset box-shadow. While typically used for casting shadows, box-shadow can also be inset to simulate a color overlay. Paired with a transition rule, this lets the color “fill” the button from left to right on hover.

This button uses an inset box-shadow to create a bold band of contrasting color on the right side. This color band slides over on hover to cover the whole button. It’s a clean, modern look - more akin to a tab than a traditional button, but still sharp and professional.

Here's a breakdown of what is going on with the box-shadow:

• inset - renders the shadow inside the element, rather than outside.
• 10px - the horizontal offset (or width of the inset bar in this case). On hover, it increases to the width of the button, creating a complete fill.
• 0 - the vertical offset; since it's zero, the shadow only appears as a vertical bar on the right side.
• #A3C09B - the solid color used for the inset fill.

A rectangular button that shifts from a solid color to a gradient on hover. Since gradients don’t transition smoothly with transition, this effect uses actual CSS animations. The trick: the gradient background is already there - just positioned off-screen. On hover, the animation slides it into view.

Two keyframe animations are used - one for hover in, one for hover out - to create a smooth transition in both directions. The background position values in the animations are carefully coordinated with the hover state and animation timing to ensure a seamless effect without visible jumps. If your button has different dimensions, you may need to tweak these values for best results.

One quirk of this approach is that the "hover out" animation plays on page load. But unless the button is visible right away, it’s unlikely anyone will notice - and it’s a small price to pay for smooth, animated gradient transitions.

A basic rectangular button, where the gradient flips direction on hover. Since gradients don’t transition smoothly by default, we use a CSS animation to create a fluid shift between gradient states.

If you look closely at the css, you'll see that "flipping" is a misnomer here. Technically, the gradient isn’t flipping - it’s being repositioned. The background is scaled up and animated horizontally, creating the illusion of a directional change.

One caveat: the “hover out” animation runs on page load. But unless the button is high on the page, most users won’t notice - and the payoff is a smooth, eye-catching transition.

In this example, an icon appears on hover, inviting users to click and proceed to the next page or content. This adds a subtle, engaging animation while maintaining a professional look.

The icon is inserted via a ::before pseudo-element, initially set to opacity 0. On hover, its opacity transitions to 1, while the main text is indented - creating the effect of the text sliding aside to reveal the icon.

FontAwesome is a popular icon library with many options, often seen on websites. Free versions are available, but you’ll need to install the library on your site to use the icons. Browse the full collection and get installation details here.

Sometimes it’s fun to be literal. These buttons mimic real-world keyboard keys and feature a satisfying “pressed” animation on hover. The effect is achieved with a carefully layered box-shadow. Each line in the box-shadow rule adds a separate shadow, slightly darker than the one before, to create a smooth, stacked shading effect beneath the button.

The box-shadow property can accept multiple shadows at once, separated by commas; I’ve written each shadow on its own line for readability. Each individual shadow rule creates a thin horizontal line of color, gradually building up a dimensional base. On hover, half of the lines are removed to simulate compression. The final shadow includes a blur radius to give a soft, realistic drop shadow.

A key challenge with this design is choosing the right color progression. You’ll need to start with the base color and gradually darken it with each successive shadow to achieve the smooth, layered shading effect. It can take a bit of trial and error, but the result is well worth it for a polished, dimensional look.

A button that behaves more like a flipping block - on hover it spins to reveal a new side. Each side can be customized independently with different text, colors, fonts, or styles.

The effect is achieved by placing the front and back faces in the ::before and ::after pseudo-elements. The main button div remains invisible; it provides structural support and ensures the element doesn't deform during the transition. On hover, each pseudo-element is rotated and shifted using transform, creating the illusion of one face sliding away as the other rotates into view. Once the animation completes, the inactive side is hidden with opacity: 0 to complete the illusion.

The animation itself is straightforward. No custom keyframes are needed - just a simple transition on transform and opacity for each side.