CSS Button Generator

18 trending button styles with live hover preview

Style Presets

Choose from 18 trending button styles — hover the preview to see effects!

Live Preview

Hover the button to see the effect!

Customize

Button Text

Primary Color

Text Color

Font Size16px

Padding X24px

Padding Y12px

Generated CSS

Complete CSS with hover, active states and keyframe animations

.btn {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #6366f1;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

Loading ToolBox...