How to Create Modern Buttons Using Only CSS

Buttons are essential elements of any modern website or application. They guide users, enhance the user experience, and are often the focal point of interaction. In this article, we’ll explore how to create sleek, modern buttons using only CSS — no JavaScript or external libraries required!

Basic Button Structure

To create a button, we’ll use a simple HTML structure:

HTML

<button class="btn default">Click Me</button>

This is a plain button element with a classes of btn and default that we will style with CSS.

1. Styling the Default Button

Let’s add some basic styling to our button. This will set the foundation for the modern design.

CSS

.btn { /* The basic spacing and styling for ALL buttons */
  cursor: pointer;
  font-size: 16px;
  padding: 12px 24px;
}

.btn.default {
  background-color: #4CAF50; /* Green background */
  border: none;
  color: white;
  font-weight: bold;
  border-radius: 8px;
  transition: all 0.3s ease;
}

Explanation:

Cursor: Changes the pointer to a hand on hover.
Font size and weight: Controls text appearance.
Padding: Adds space inside the button.
Background color: Sets the color of the button.
Border: Removes the default border.
Color: Changes the text color.
Border radius: Rounds the corners.
Transition: Smoothens animations for hover effects.

2. Hover Effects

A modern button isn’t complete without a subtle hover effect. Here’s one way to do it:

CSS

.btn.default:hover {
  background-color: #45a049; /* Slightly darker green */
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

Explanation:

Background color: Slightly changes to a darker green.
Transform: Shifts the button upwards for a “floating” effect.
Box shadow: Adds a soft shadow under the button.

3. Pressed (Active) State

To give users feedback when they click the button, we’ll use the :active pseudo-class.

CSS

.btn.default:active {
  transform: translateY(2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

This “press-down” effect mimics physical buttons when pressed.

Adding Button Variations with CSS

Why stop at just one style? Here are a few variations for buttons that can be easily customized:

Outline Button

CSS

.btn.outline {
  background-color: transparent;
  border: 2px solid #4CAF50;
  color: #4CAF50;
  transition: all 0.3s ease;
}

.btn.outline:hover {
  background-color: #4CAF50;
  color: white;
}

This “outline” button switches its color scheme on hover.

Ghost Button

CSS

.btn.ghost {
  background-color: transparent;
  color: #4CAF50;
  border: none;
  font-weight: bold;
}

.btn.ghost:hover {
  background-color: rgba(76, 175, 80, 0.1);
}

The “ghost” button has a minimalist feel and subtle hover feedback.

Animating Buttons – No Javascript Needed

For a modern, interactive design, animations are crucial. Here’s a simple animation for a button glow effect

CSS

.btn.animate {
  background-color: #4CAF50;
  position: relative;
  overflow: hidden;
}

.btn.animate::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: skewX(-45deg);
  transition: all 0.5s ease;
}

.btn.animate:hover::before {
  left: 100%;
}

This creates a sliding light effect that moves across the button on hover.

Responsive Design

Don’t forget to make buttons responsive. Here’s an example of how to make sure the button scales on smaller screens.

CSS

@media (max-width: 768px) {
  .btn {
    font-size: 14px;
    padding: 10px 20px;
  }
}

This media query adjusts padding and font size for smaller devices.

Full Example

You can find an interactive example as well as play around with the styles on my codepen here

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern CSS Buttons</title>
<style>
  .btn {
    cursor: pointer;
    font-size: 16px;
    padding: 12px 24px;
  }
  
  @media (max-width: 768px) {
    .btn {
      font-size: 14px;
      padding: 10px 20px;
    }
  }
  
  .btn.default {
    background-color: #4CAF50; /* Green background */
    border: none;
    color: white;
    font-weight: bold;
    border-radius: 8px;
    transition: all 0.3s ease;
  }
  
  .btn.default:hover {
    background-color: #45a049; /* Slightly darker green */
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
  }
  
  .btn.default:active {
    transform: translateY(2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  
  .btn.outline {
    background-color: transparent;
    border: 2px solid #4CAF50;
    color: #4CAF50;
    transition: all 0.3s ease;
  }
  
  .btn.outline:hover {
    background-color: #4CAF50;
    color: white;
  }
  
  .btn.ghost {
    background-color: transparent;
    color: #4CAF50;
    border: none;
    font-weight: bold;
  }
  
  .btn.ghost:hover {
    background-color: rgba(76, 175, 80, 0.1);
  }
  
  .btn.animate {
    background-color: #4CAF50;
    position: relative;
    overflow: hidden;
  }
  
  .btn.animate::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: skewX(-45deg);
    transition: all 0.5s ease;
  }
  
  .btn.animate:hover::before {
    left: 100%;
  }
</style>
</head>
<body>
  <button class="btn default">Click Me</button>
  <button class="btn outline">Outline</button>
  <button class="btn ghost">Ghost</button>
  <button class="btn animate">Animated</button>
</body>
</html>

Final Tips

Simplicity is key: Avoid over-complicated designs.
Consistent spacing: Use consistent padding and margins.
Accessible colors: Ensure sufficient color contrast for accessibility.

Conclusion

With just a little CSS, you can create modern, sleek, and interactive buttons that enhance user experience. We’ve covered basic buttons, hover effects, animations, and responsive designs. Start small and expand your design as you get more comfortable with CSS.

If you enjoyed this post, check out one of my other posts. Learn how to use CSS and Flexbox to create a basic admin page layout.