CSS Buttons

CSS Buttons

Turn plain <button> and <a> elements into polished, themed buttons.

The base button

.btn {
  display: inline-block;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px #666;
  background-color: #04aa6d;
  color: white;
}

Pressed/3D look

.btn:hover {
  background-color: #3e8e41;
}
.btn:active {
  background-color: #3e8e41;
  transform: translateY(2px);   /* sink down */
  box-shadow: 0 2px #666;       /* shadow shrinks */
}

Sizes

.btn { padding: 8px 16px; }
.btn-lg { padding: 14px 32px; }
.btn-sm { padding: 4px 10px; }

Rounded & outline variants

.btn-round { border-radius: 50px; }
.btn-outline {
  background-color: transparent;
  color: #04aa6d;
  border: 2px solid #04aa6d;
}
.btn-outline:hover {
  background-color: #04aa6d;
  color: white;
}

Icon inside button

<button class="btn"><span class="arrow">→</span> Continue</button>

TL;DR

• Give buttons padding, radius, hover and :active states.
• :active + translateY/shadow makes a pressed, 3D feel.
• Offer size variants (.btn-sm, .btn-lg).
• Outline/transparent variants suit fab buttons.
• Center text, remove underline, add cursor: pointer.