In today’s article, we’ll explore how to create a striking, animated neon-like gradient button using pure CSS. This button will add a vibrant touch to your website, with smooth color transitions that give it a dynamic and futuristic look. Let’s dive into the HTML and CSS code to understand how this effect is achieved.
HTML Structure
The HTML structure is minimalistic, consisting of a button element wrapped within the body tag. Here’s the complete HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neon Gradient Button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button>Get Started</button>
</body>
</html>
In this HTML, we’re linking to an external CSS file (style.css) where the magic happens. The button is given the text “Get Started” and is centered on the page using flexbox.
CSS Styling
The CSS code is where we create the vibrant, animated button effect. Let’s break down the key parts:
@import url('https://fonts.googleapis.com/css?family=Space%20Grotesk:700|Space%20Grotesk:400');
:root {
/* Custom properties for scaling and colors */
--m: 6rem;
--red: #FF6565;
--pink: #FF64F9;
--purple: #6B5FFF;
--blue: #4D8AFF;
--green: #5BFF89;
--yellow: #FFEE55;
--orange: #FF6D1B;
}
Custom Properties: We define several CSS variables (--m, --red, --pink, etc.) to control the size of the button and the colors used in the gradient animation. This makes it easy to tweak the design by simply adjusting these variables.
body {
background-color: transparent;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
Body Styling: The body is set to be fully flexible and centered, ensuring the button is always displayed in the center of the viewport.
button {
border: calc(0.08 * var(--m)) solid transparent;
position: relative;
color: #F3F3F3;
font-family: 'Space Grotesk';
font-size: var(--m);
border-radius: calc(0.7 * var(--m));
padding: calc(0.5 * var(--m)) calc(1 * var(--m));
display: flex;
justify-content: center;
cursor: pointer;
background: linear-gradient(#121213, #121213),
linear-gradient(#121213 50%, rgba(18, 18, 19, 0.6) 80%, rgba(18, 18, 19, 0)),
linear-gradient(90deg, var(--orange), var(--yellow), var(--green), var(--blue), var(--purple), var(--pink), var(--red));
background-origin: border-box;
background-clip: padding-box, border-box, border-box;
background-size: 200%;
animation: animate 2s infinite linear;
}
Button Styling:
- The button is given a thick border with transparent colors, and a
relativeposition to allow for absolute positioning of pseudo-elements. - The background is composed of three layered gradients:
- A solid dark background.
- A semi-transparent gradient for subtle transitions.
- A vibrant rainbow gradient that animates.
- The
background-clipproperty ensures that the gradients stay within the button’s border-box. - The
animationproperty applies a linear animation to create the moving gradient effect.
button::before {
content: '';
background: linear-gradient(90deg, var(--orange), var(--yellow), var(--green), var(--blue), var(--purple), var(--pink), var(--red));
height: 30%;
width: 60%;
position: absolute;
bottom: -20%;
z-index: -5;
background-size: 200%;
animation: animate 2s infinite linear;
filter: blur(calc(0.8 * var(--m)));
}
Before Pseudo-Element:
- A
::beforepseudo-element is used to add a blurred, glowing effect underneath the button. This element also uses the animated gradient, contributing to the overall neon look.
button:hover, button:hover::before {
animation: animate 0.5s infinite linear;
}
Hover Effect: On hover, the animation speed is increased, making the gradient transition more rapid, which adds a dynamic interaction to the button.
@keyframes animate {
0% {background-position: 0}
100% {background-position: 200%}
}
Animation Keyframes: This defines the gradient animation, smoothly shifting the background position from the start to the end, creating the illusion of a moving gradient.
@media screen and (max-width: 1000px) {
:root {
--m: 2rem;
}
}
Responsive Design: The button’s size is reduced for smaller screens, ensuring it remains proportionate and visually appealing on all devices.
Conclusion
This CSS-only approach to creating a neon-like gradient button is both visually striking and performance-friendly. By utilizing CSS variables, gradient layers, and animations, you can create a button that not only looks great but also enhances user interaction. Try customizing the colors and animation speeds to fit your website’s theme and watch your button come to life!
