CSS Buttons

Buttons are an essential part of any website — they allow users to interact, submit forms, click links, or trigger actions. With CSS, we can completely change how buttons look and behave, making them more engaging and user-friendly.

Let’s explore different ways to style buttons using CSS.

Basic Syntax:

To style a button, you use the <button> HTML element and apply CSS rules to it using a class or selector.

				
					button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
}

Common Button Styles

Here’s an example demonstrating 7 types of buttons, all styled differently:

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Buttons - Learn With Arshyan</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 40px;
      background-color: #f4f4f4;
    }

    h2 {
      margin-bottom: 20px;
      color: #222;
    }

    .button-group {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }

    button {
      padding: 12px 24px;
      font-size: 16px;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    /* Primary */
    .btn-primary {
      background-color: #2d89ef;
      color: white;
      border-radius: 5px;
    }

    .btn-primary:hover {
      background-color: #1b6dc1;
    }

    /* Outline */
    .btn-outline {
      background: none;
      color: #27ae60;
      border: 2px solid #27ae60;
      border-radius: 5px;
    }

    .btn-outline:hover {
      background-color: #27ae60;
      color: white;
    }

    /* Rounded */
    .btn-rounded {
      background-color: #8e44ad;
      color: white;
      border-radius: 50px;
    }

    .btn-rounded:hover {
      background-color: #6c3483;
    }

    /* Shadow */
    .btn-shadow {
      background-color: #f39c12;
      color: white;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
    }

    .btn-shadow:hover {
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    }

    /* Gradient */
    .btn-gradient {
      background: linear-gradient(to right, #00c6ff, #0072ff);
      color: white;
      border-radius: 5px;
    }

    .btn-gradient:hover {
      opacity: 0.9;
    }

    /* Ghost */
    .btn-ghost {
      background: white;
      color: #e74c3c;
      border: 2px dashed #e74c3c;
      border-radius: 5px;
    }

    .btn-ghost:hover {
      background: #e74c3c;
      color: white;
    }

    /* Text */
    .btn-text {
      background: none;
      border: none;
      color: #555;
    }

    .btn-text:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>

  <h2>Explore CSS Button Styles</h2>
  <div class="button-group">
    <button class="btn-primary">Primary</button>
    <button class="btn-outline">Outline</button>
    <button class="btn-rounded">Rounded</button>
    <button class="btn-shadow">Shadow</button>
    <button class="btn-gradient">Gradient</button>
    <button class="btn-ghost">Ghost</button>
    <button class="btn-text">Text Only</button>
  </div>

</body>
</html>

Summary

Use border-radius to make buttons rounded.
Apply box-shadow for a 3D effect.
Use :hover for interactive effects when the mouse is over a button.
Combine gradient, dashed borders, or outlines for creative styles.
Always keep the button style consistent with your website theme.