Copy-paste CSS button design collection

A button is the spot on a page you most “want pressed,” yet left plain it’s a bland gray. This article gathers 9 ready-to-use button designs, with live demos. Copy-paste and just match the color and wording to your page.

First, a shared foundation

A browser’s default button still has a gray border and small text. Resetting the plain look first with this .btn makes every design sit cleanly on top.

.btn {
  display: inline-block;
  padding: 12px 28px;
  font: inherit;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

The buttons below are used by stacking color and motion classes on this .btn. For the HTML, just add two classes, like <button class="btn primary">.

Basic shapes

Basic button

Start here. A clear color + white text + rounded corners: the basic form that works on any site.

.primary {
  background: #ff8a3d;
  color: #fff;
}

Just changing the one background color matches it to your site’s mood.

Pill button

Maxing out the rounded corners makes a soft, capsule-like shape. A classic for sites that want a gentle impression.

.pill {
  border-radius: 999px;
}

999px means “a value so large it can’t get any rounder.” It always becomes a complete half-circle even if the height changes.

Color and texture

Gradient button

When you want it to look a bit richer than a single color, use a gradient. Connecting two colors of similar hue keeps it elegant.

.gradient {
  background: linear-gradient(135deg, #ff8a3d, #ff5e78);
  color: #fff;
}

135deg is the direction the color flows (top-left → bottom-right). Swap the two color codes to match your own color scheme.

Outline button

A restrained button with just a border, no fill. Often used for the secondary button rather than the primary one, like “Cancel.” Hovering turns it into a filled button.

.outline {
  background: #fff;
  color: #ff8a3d;
  border: 2px solid #ff8a3d;
  transition: background 0.2s, color 0.2s;
}
.outline:hover {
  background: #ff8a3d;
  color: #fff;
}

You change just one color. The trick is to put the same color code in these three spots: color, border, and the :hover background. Matching it to the primary button’s color makes the “primary and secondary” relationship clear when the two sit side by side.

Pop bordered button

A black border + an offset shadow gives a pop, comic-like texture. Pressing sinks it by the shadow’s amount, giving a solid “pressed” feel.

.pop {
  background: #ffd93d;
  color: #333;
  border: 2px solid #333;
  box-shadow: 4px 4px 0 #333;
}
.pop:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

The trick is offsetting the shadow with “blur 0.” Moving it by the shadow’s amount on :active (while pressed) makes it sink into the shadow’s position.

Feeling good with motion

Softly lifting button

Hovering lifts it a little and the shadow stretches. As a “you can press me” signal, this is the easiest motion to use.

.lift {
  transition: transform 0.2s, box-shadow 0.2s;
}
.lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(255, 138, 61, 0.45);
}

Making the shadow a translucent version of a color in the same family as the button gives it a soft glow.

Button that sinks in when pressed

A 3D button with a thick shadow on the underside that sinks the moment you press. Perfect for a game-like, energetic screen.

.press {
  background: #2ec46f;
  color: #fff;
  box-shadow: 0 5px 0 #1d9d55;
}
.press:active {
  transform: translateY(5px);
  box-shadow: none;
}

Making the thickness shadow “a slightly darker color in the same family as the button” looks natural.

Button with an arrow that slides

For a guiding button like “Next” or “See more,” having just the arrow move ahead on hover makes it look like there’s a destination.

.arrow span {
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.2s;
}
.arrow:hover span {
  transform: translateX(4px);
}

For the HTML, just wrap the arrow in a <span> (Next<span>→</span>). Only that <span> moves.

Button with a running shine

Hovering sends a shine sweeping across the surface. Using just one on a key primary button is effective.

.shine {
  background: #7c5cff;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-25deg);
}
.shine:hover::after {
  animation: shine 0.6s;
}
@keyframes shine {
  to { left: 125%; }
}

The mechanism is “run a band of light, hidden outside the button, to the right edge on hover.” Since there’s overflow: hidden, the part that sticks out isn’t visible.

Size and state variations

Even with the same design, you’ll want to change the size or state depending on the situation. Preparing these three common ones as classes to stack on .btn is handy.

/* Smaller (e.g. an action button inside a list) */
.small {
  padding: 8px 18px;
  font-size: 14px;
}

/* Full width (e.g. a submit button on a phone) */
.block {
  display: block;
  width: 100%;
}

/* Disabled (can't be pressed) */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

For the HTML, just add one more class, like <button class="btn primary small">. :disabled automatically takes effect on a button you write as <button disabled> in the HTML. It’s the standard way to express a button you can’t press right now, like “already submitted” or “input incomplete.”

Making a link look like a button

Something that “moves to another page when pressed” is really a link (<a>). The classes so far work on <a> as-is, but one line to remove the underline needs to be added.

a.btn {
  text-decoration: none;
}

The guideline for choosing: use <a> if it moves to another page, and <button> if something happens right there (submit, play, and so on).

Checklist for when a button looks off

When you’ve copy-pasted but the look is off, it’s usually one of these.

• A gray border remains → Did you add border: none? (The browser’s default border is left in)
• Only the button text has a different font → Buttons don’t inherit the surrounding font. font: inherit solves it
• An underline appears on the link → When using it on <a>, add text-decoration: none
• The cursor stays an arrow even on hover → Give the “you can press me” signal with cursor: pointer

Summary

1. First do the foundation with .btn (resetting the border, font, and cursor), then stack color and motion classes on top
2. Give the primary button an eye-catching color + one hover motion; keep the secondary one restrained with an outline
3. Page moves are <a>, on-the-spot actions are <button>. The look can be shared with the same class

Just picking one you like and swapping the color transforms the “spot you want pressed” on your page.