Welcome to Peter Lightspeed Blog

Header Ads Widget

Responsive Advertisement

How to Create an Animated Gradient Button Using HTML and CSS

Peter Lightspeed October 11, 2025

 Have you ever seen those glowing, color-changing buttons on websites and wondered how they’re made? In this mini web development tutorial, we’ll create a beautiful animated gradient button using just HTML and CSS no JavaScript needed!

This effect looks clean, modern, and professional perfect for portfolio websites, call-to-action sections, or even personal projects.



Step 1: Set Up the Basic HTML

We’ll start with a simple HTML structure and add our button inside the <body> tag.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Gradient Button</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button class="gradient-btn">Hover Me</button>
</body>
</html>

Step 2: Add the CSS Magic

Here’s where the animation comes to life!
We’ll use linear gradients, transitions, and a hover effect to animate the colors smoothly.

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0a0a0a;
}

.gradient-btn {
  padding: 14px 40px;
  border: none;
  border-radius: 50px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  background: linear-gradient(45deg, #6a11cb, #2575fc, #ff512f, #dd2476);
  background-size: 300%;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.gradient-btn:hover {
  background-position: right center;
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

Step 3: Add a Glow Effect

To make it even more attractive, let’s add a glow effect using the ::before pseudo-element.

.gradient-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px;
  background: linear-gradient(45deg, #6a11cb, #2575fc, #ff512f, #dd2476);
  background-size: 300%;
  filter: blur(8px);
  opacity: 0;
  z-index: -1;
  transition: 0.5s ease;
}

.gradient-btn:hover::before {
  opacity: 1;
  background-position: right center;
}


Step 4: See It in Action

Once you save and run your file, hover your mouse over the button you’ll see the smooth gradient transition and glow effect.



This small but stylish detail can make your website stand out and feel more interactive.

Step 5: Add It to Your Portfolio

You can add this animated gradient button as your “Contact Me”, “Download CV”, or “Learn More” button to make your portfolio look even more dynamic.

If you want to add a working contact form to your website, check this guide:
👉 How to Add a Working Contact Form Using Formspree


WATCH THE FULL VIDEO HERE



Tags:

Post a Comment

0 Comments

DON'T FORGET TO COMMENT YOU are chatting with Peter Lightspeed himself 😎