CSS Color-Changing Button Hover Effect

Adding interactive elements to your website enhances user engagement. One great way to achieve this is by creating a color-changing button and hover effect using CSS. In this tutorial, I'll show you how to make a button that smoothly transitions through multiple colors.

🎨 What We'll Build

We'll create a button that:

Changes color smoothly
Uses a gradient animation
Requires no JavaScript, only pure CSS

📺 Watch the Video

If you prefer video tutorials, check out my YouTube video :

https://youtu.be/hcicI60Gtqk

🛠️ Step-by-Step Code Explanation

1️⃣ HTML Structure

We start with a simple button inside a <button> tag:

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

2️⃣ CSS Styling

Now, let's add styles to bring the button to life.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #1e1e1e;
}

.button {
    padding: 15px 30px;
    font-size: 20px;
    font-weight: bold;
    color: white;
    background: linear-gradient(45deg, #ff0000, #ff7300, #ffeb00, #47ff00, #00ffcc, #0047ff, #7a00ff, #ff00c8);
    background-size: 400% 400%;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s;
    animation: gradientAnimation 5s infinite linear;
}

.button:hover {
    transform: scale(1.1);
}

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

3️⃣ How It Works

We use a linear gradient for a multi-color effect.
The background-size is set to a large value so the colors shift smoothly.
The @keyframes animation moves the gradient background.
A hover effect slightly scales the button for a nice interaction.

🚀 Conclusion

This simple CSS-only effect makes your buttons more engaging. Try adding it to your project and experiment with different colors! 🎨

📌 Like this tutorial? Share it and follow for more CSS tricks!

Create a Cool Color-Changing Button Hover Effect with CSS