CSS Button Styles

Here are four button styles that you can copy to your site. The same CSS works for <button> and for links with the class btn.

HTML

<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline">Outline</button>
<button class="btn btn-pill">Pill</button>
<button class="btn btn-primary" disabled>Disabled</button>

CSS

.btn {
  padding: 10px 22px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.btn-primary {
  background: #0073aa;
  color: #fff;
  border: 2px solid #0073aa;
}
.btn-primary:hover { background: #005177; border-color: #005177; }

.btn-outline {
  background: transparent;
  color: #0073aa;
  border: 2px solid #0073aa;
}
.btn-outline:hover { background: #0073aa; color: #fff; }

.btn-pill { border-radius: 999px; background: #43a047; color: #fff; border: 2px solid #43a047; }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid orange; outline-offset: 2px; }

Output in the browser (hover colours do not show in this box):

• Previous Code
• Next Code

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.