ASWCode | Gradient Button Snippet

Gradient Button with Hover Effect

This CSS snippet demonstrates how to create a visually appealing gradient button that smoothly transitions when hovered. Using a combination of linear gradient backgrounds, opacity change, and subtle scaling, this button instantly adds a modern and interactive feel to your website. You can customize the gradient colors, font size, padding, and hover transition speed to fit any design style. Ideal for call-to-action buttons, landing pages, or interactive UI elements, this snippet ensures your buttons look professional and engaging. Lightweight and easy to integrate, it improves the user experience and enhances the visual appeal of your web projects effortlessly.

How to use: Copy and paste the code into your HTML file.
Change colors: Edit the gradient colors in background.
Adjust hover effect: Modify opacity or transition-duration.

<button class="gradient-btn">Click Me</button>

<style>
.gradient-btn {
  background: linear-gradient(45deg, #ff7b00, #ff0080);
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.2s ease;
}

.gradient-btn:hover {
  opacity: 0.8;
  transform: scale(1.05);
}
</style>