🎯

CSS Button Generator

Create beautiful, customizable buttons with hover effects, animations, and modern styling. Perfect for web applications and websites.

Button Settings

Enter the text that will appear on the button
Choose from various button styles including primary, secondary, outline, ghost, and gradient
Select button background color using color picker or enter hex value
Select button text color using color picker or enter hex value
Adjust border width from 0 to 10 pixels
0px5px10px
Adjust border radius from 0 to 50 pixels for rounded corners
0px25px50px
Enter padding values in CSS format (e.g., 8px 16px for top/bottom and left/right)
Enter font size in CSS units (e.g., 16px, 1rem, 1.2em)
Choose hover effect animation for interactive button behavior
Button updated: primary style with lift hover effect

Live Preview

Complete CSS Code:
.btn {
  background-color: #3b82f6;
  color: #ffffff;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 16px;
  border: 2px solid #3b82f6;
  cursor: pointer;
  display: inline-block;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  user-select: none;
  transition: all 0.15s ease-in-out;
}

.btn:disabled {
  pointer-events: none;
  opacity: 0.65;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

HTML Example

Use this HTML structure with your CSS
<button class="btn">Click Me</button>

Properties Summary

Style
primary
Size
md
Border Radius
6px
Hover Effect
lift