Gradient Buttons

Gradient buttons stand out visually. Use a hover effect to shift the gradient angle or brightness.

Example

.btn-grad {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff; border: none; padding: 0.75rem 2rem; border-radius: 2rem; cursor: pointer;
  transition: filter 0.2s, transform 0.15s;
}
.btn-grad:hover { filter: brightness(1.12); transform: translateY(-2px); }

CSS

Full Editor

Pro Tip

filter: brightness() is an easy hover effect that works on any gradient color.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned