CSS Buttons

Buttons

Buttons are one of the most common UI components. A good button style usually includes:

• padding and border radius
• clear background + text contrast
• hover and active feedback
• focus styles for keyboard users

Basic button style:

.btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

Outline button variant:

.btn-outline {
  background: transparent;
  color: #2563eb;
  border-color: rgba(37,99,235,.55);
}

Disabled state:

.btn:disabled,
.btn.is-disabled {
  opacity: .55;
  cursor: not-allowed;
}

Keyboard focus (important):

.btn:focus-visible {
  outline: 3px solid rgba(37,99,235,.35);
  outline-offset: 2px;
}

Hover Effects

Hover effects should be subtle and fast. The cleanest effects are typically made using transform, box-shadow, and color transitions.

.btn {
  transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease;
}

.btn:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.btn:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

Outline hover:

.btn-outline {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-outline:hover {
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.8);
}

Tip: Avoid transition: all. It can animate unexpected properties and make the UI feel inconsistent.

Button Groups

A button group aligns multiple buttons together as a single control. The key is to:

• use display: inline-flex
• remove double borders between buttons
• round only the outer corners

HTML example:

<div class="btn-group">
  <button class="btn btn-outline">Left</button>
  <button class="btn btn-outline">Middle</button>
  <button class="btn btn-outline">Right</button>
</div>

CSS button group:

.btn-group {
  display: inline-flex;
}

.btn-group .btn {
  border-radius: 0;
}

.btn-group .btn + .btn {
  margin-left: -1px; /* prevent double border */
}

.btn-group .btn:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.btn-group .btn:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

Optional: active button in a group:

.btn.is-active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

Summary

• Create buttons with padding, radius, clear contrast, and consistent states.
• Use hover effects with transforms and shadows for smooth UI feedback.
• Button groups are easiest with flex and careful border/radius handling.