Buttons

Buttons are one of the most frequently used UI elements. Good button styling must consider visual hierarchy, accessibility, and interaction feedback. Every button should have clear states: normal, hover, active, focus, and disabled.

Resetting the browser's default button style is important before styling, because every browser has different default styles. After the reset, you can build buttons from scratch in a consistent way.

Button variations include primary (main color), secondary (outline), ghost (no background), icon buttons, and button groups. Each variation has its own use case.

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  /* Button Reset */
  .btn {
    font-family: inherit;
    font-size: 1em;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.2s ease;
    text-decoration: none;
    line-height: 1;
  }

  .btn:active {
    transform: scale(0.97);
  }

  .btn:focus-visible {
    outline: 3px solid #667eea;
    outline-offset: 2px;
  }

  /* Primary Button */
  .btn-primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  }

  .btn-primary:hover {
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
    transform: translateY(-2px);
  }

  .btn-primary:active {
    transform: translateY(0) scale(0.97);
  }

  /* Secondary Button */
  .btn-secondary {
    background: transparent;
    color: #667eea;
    border: 2px solid #667eea;
  }

  .btn-secondary:hover {
    background: #667eea;
    color: white;
    transform: translateY(-2px);
  }

  /* Danger Button */
  .btn-danger {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
  }

  .btn-danger:hover {
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
    transform: translateY(-2px);
  }

  /* Success Button */
  .btn-success {
    background: linear-gradient(135deg, #00b894, #00cec9);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 184, 148, 0.4);
  }

  .btn-success:hover {
    box-shadow: 0 6px 20px rgba(0, 184, 148, 0.6);
    transform: translateY(-2px);
  }

  /* Ghost Button */
  .btn-ghost {
    background: transparent;
    color: #555;
  }

  .btn-ghost:hover {
    background: #f0f0f0;
    color: #333;
  }

  /* Disabled State */
  .btn:disabled,
  .btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Button Sizes */
  .btn-sm {
    padding: 8px 16px;
    font-size: 0.85em;
    border-radius: 6px;
  }

  .btn-lg {
    padding: 16px 32px;
    font-size: 1.15em;
    border-radius: 10px;
  }

  /* Icon Button */
  .btn-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    font-size: 1.2em;
  }

  /* Button Group */
  .btn-group {
    display: inline-flex;
  }

  .btn-group .btn {
    border-radius: 0;
    border-right: 1px solid rgba(255,255,255,0.2);
  }

  .btn-group .btn:first-child {
    border-radius: 8px 0 0 8px;
  }

  .btn-group .btn:last-child {
    border-radius: 0 8px 8px 0;
    border-right: none;
  }

  .btn-group .btn.active {
    background: rgba(255,255,255,0.2);
  }

  /* Social Buttons */
  .social-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .btn-social {
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 600;
  }

  .btn-google {
    background: white;
    color: #333;
    border: 1px solid #ddd;
  }

  .btn-google:hover {
    background: #f8f8f8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

  .btn-facebook {
    background: #1877f2;
    color: white;
  }

  .btn-facebook:hover {
    background: #166fe5;
    box-shadow: 0 4px 12px rgba(24,119,242,0.4);
  }

  .btn-github {
    background: #24292e;
    color: white;
  }

  .btn-github:hover {
    background: #2f363d;
    box-shadow: 0 4px 12px rgba(36,41,46,0.4);
  }

  /* Section */
  .section {
    margin: 30px 0;
    padding: 25px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }

  .section h3 {
    margin-top: 0;
    color: #333;
  }

  .btn-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
  }

  body {
    font-family: Arial, sans-serif;
    padding: 40px 20px;
    background: #f5f5f5;
  }
</style>
</head>
<body>
  <div class="section">
    <h3>Color Variations</h3>
    <div class="btn-row">
      <button class="btn btn-primary">Primary</button>
      <button class="btn btn-secondary">Secondary</button>
      <button class="btn btn-danger">Danger</button>
      <button class="btn btn-success">Success</button>
      <button class="btn btn-ghost">Ghost</button>
    </div>
  </div>

  <div class="section">
    <h3>Size</h3>
    <div class="btn-row">
      <button class="btn btn-primary btn-sm">Small</button>
      <button class="btn btn-primary">Normal</button>
      <button class="btn btn-primary btn-lg">Large</button>
    </div>
  </div>

  <div class="section">
    <h3>Disabled State</h3>
    <div class="btn-row">
      <button class="btn btn-primary" disabled>Primary Disabled</button>
      <button class="btn btn-secondary btn-disabled">Secondary Disabled</button>
    </div>
  </div>

  <div class="section">
    <h3>Icon Buttons</h3>
    <div class="btn-row">
      <button class="btn btn-primary btn-icon" title="Edit">✏️</button>
      <button class="btn btn-danger btn-icon" title="Delete">🗑️</button>
      <button class="btn btn-secondary btn-icon" title="Share">📤</button>
      <button class="btn btn-success btn-icon" title="Save">💾</button>
    </div>
  </div>

  <div class="section">
    <h3>Button Group</h3>
    <div class="btn-group">
      <button class="btn btn-primary">Left/button>
      <button class="btn btn-primary active">Center/button>
      <button class="btn btn-primary">Right/button>
    </div>
  </div>

  <div class="section">
    <h3>Social Login</h3>
    <div class="social-buttons">
      <button class="btn btn-social btn-google">🔵 Google</button>
      <button class="btn btn-social btn-facebook">📘 Facebook</button>
      <button class="btn btn-social btn-github">⚫ GitHub</button>
    </div>
  </div>
</body>
</html>

Code Explanation

Button Reset: The properties font-family, font-size, border: none, and cursor: pointer remove the browser's default styles. This ensures a consistent appearance in all browsers.

transition: all 0.2s: Provides smooth transitions on all property changes during hover, active, or any other state change. A 0.2s duration is fast enough while still being perceivable.

transform: scale(0.97) on active: Provides a "pressed" effect when the button is clicked. Scaling slightly smaller creates the impression of a physical interaction.

box-shadow on hover: A larger and more spread-out shadow on hover provides a "lifted" effect that gives feedback the element is clickable.

transform: translateY(-2px) on hover: A subtle lift effect that makes the button feel like it rises when hovered.

:focus-visible: Only shows an outline when the button is focused via keyboard (Tab), not via mouse click. This keeps accessibility without interfering with the mouse UX.

pointer-events: none on disabled: Prevents all mouse interaction on a disabled button, including hover effects.

Everyday Use Cases

CTA (Call to Action): A primary button with a gradient and a prominent shadow for buttons like "Buy Now" or "Register for Free".

Form actions: A secondary button for "Cancel" and a primary button for "Save" in a form dialog.

Editor toolbar: Icon buttons for bold, italic, underline, and other editor functions.

Pagination: A button group for page navigation with a clear active state.

Conclusion

Good button styling starts with a reset, followed by a clear visual hierarchy between variations. Every button should have visible states: normal, hover (lift effect), active (pressed), focus (keyboard accessible), and disabled (dimmed). Use gradients and shadows for primary buttons, outlines for secondary, and icon-only buttons for compact toolbars.