This classic style works well on any site. I've used green to gold here, but you can match the base and hover colors to your own branding.

Padding, font, and width rules help keep all the button examples uniform - but feel free to adjust them. Remove the width for varied sizes, or reduce padding for a slimmer look. I recommend keeping the text-align rule to avoid off-center text.

This button is the rounded-corner version of the classic rectangular style. The choice between sharp or rounded corners is purely aesthetic - both have trended in and out of fashion. While sharp edges may be having a moment, the softer feel of rounded corners can better suit certain designs.

You don’t need a border to use border-radius; the rule still applies without one.

Outlined buttons are a clean, flexible choice - especially useful on saturated or textured backgrounds. Instead of using a solid fill, these buttons rely on a visible border and contrasting text color to stand out without overwhelming the design.

A common approach is to start with a white background and apply a contrasting colored border and matching text. On hover, the background and text colors swap, creating a high-contrast, interactive effect. This technique keeps the button lightweight while still clearly signaling interactivity.

This is the rounded-corner variation of the classic outlined button - same styling logic, softer silhouette. By adding a border-radius, you get a more approachable look. The hover effect remains the same: background and text colors swap for contrast and interactivity.

In this example, the border radius is set to 15 pixels. Lower values (like 5px) create a subtler curve, while higher values push the button toward a pill-shaped appearance.

This solid-color button darkens on hover. No secondary background color required. The beauty of the approach is its flexibility—you don’t need to worry about choosing a specific hover color, and it works with nearly any base color that isn’t already very dark.

Background images are always applied over the background color. This style takes advantage of that property by putting a linear gradient in as the background image, and then setting that gradient to be a single transparent color - in this case, black with only 20% opacity. Increase that 0.2 to make it darker, and decrease in order to make it a lighter effect.

This variation lightens the button on hover - a simple alternative to the darkening method. While you could achieve the effect with a gradient overlay, there's an even easier option if the button sits on a light background: reduce the button’s overall opacity on hover.

In this example, the button drops to 80% opacity. Raise the value for a subtler effect, or lower it for a more noticeable shift. If you did need to to lighten a button on a dark background, then you could also use the following on hover instead of the opacity shift:

background-image: linear-gradient(rgba(255, 255, 255, 0.2));

Slanted buttons are quirky, eye-catching, and suggest motion. While not suited to every site, they can add a distinctive flair that helps your design stand out.

The slant effect is created using ::before and ::after pseudo-elements, skewed with transform: skewX(). These elements sit behind the main button using z-index: -1, while the button itself is positioned relatively and given a higher z-index: 1 to stay on top.

Because of the slant, these buttons can be tricky to align vertically with other elements. A little extra margin or padding usually solves it.

For this example, I did a simple background color change on hover. Fortunately, we don't have to change the background color of the pseudo elements as well - that is automatically taken care of by their background: inherit rules.

To adjust the angle, tweak the skewX value. If the slant gets clipped, you may also need to adjust the left and right values of the pseudo-elements.

Slanted buttons add motion and visual interest, making them a bold stylistic choice. The slant is achieved with ::before and ::after pseudo-elements skewed using transform: skewX(). These elements sit behind the main button using z-index: -1, while the main element stays on top at z-index: 1. By using background: inherit, the background of the pseudo-elements updates automatically when the button’s background changes.

You may need to adjust margins or padding to account for the visual offset the skew introduces. To fine-tune the slant, change the skewX angle, and tweak the left and right values if clipping occurs.

Creating a clean outline on a slanted button is trickier than it looks. Initially, I added the border to the base div, but it didn’t align properly with the skewed pseudo-elements, resulting in a jarring mismatch. The solution: apply the border only to the ::before and ::after elements. To avoid a visible overlap where they meet, the left border is removed from the ::after element. This approach keeps the outline seamless, even though it’s made from multiple layers.