TTULAKITO
Designer

CSS Button Generator

Design CSS buttons with gradient, hover, and shadow controls.

All tools

Preview

CSS

.button {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.button:active {
  transform: translateY(0);
}

Frequently asked questions

What's a good minimum size for a tappable button?
Apple recommends at least 44x44 CSS pixels and Google recommends 48x48dp. Smaller targets cause mis-taps on mobile, especially near screen edges where thumbs have less reach.
How do I make a button hover state feel snappy?
Use a transition of 150-200ms on background-color or transform, and avoid transitioning multiple properties at different durations. A subtle translateY(-1px) or scale(1.02) reads as responsive without feeling cartoonish.
Should I use a button element or a styled div?
Always use a button element for actions and an anchor for navigation. Divs lack keyboard focus, role semantics, and form-submit behavior, so screen readers and tab users will skip them entirely.