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.

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.

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 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.

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.