🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.
▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube
▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube
Introduction
A glowing button can make your website more visually engaging and draw attention to important actions like "Submit" or "Call to Action" buttons. The glow effect is achieved using CSS properties like box-shadow and transition to create a smooth and interactive visual.
In this tutorial, you'll learn how to create a glow effect for a button using CSS, with optional hover and animation effects to enhance the interactivity.
Development Steps
- Use the
<button>Element: Create the button in HTML. - Add Glow Effect with CSS: Use
box-shadowto create the glow effect. - Add Hover Effect (Optional): Enhance the glow when the user hovers over the button.
HTML and CSS Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glow Button</title>
<style>
/* Step 1: Style the button and add glow effect */
.glow-button {
font-size: 1.5rem;
color: white;
background-color: #3498db;
padding: 10px 30px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: box-shadow 0.3s ease; /* Smooth transition for hover */
box-shadow: 0 0 15px rgba(52, 152, 219, 0.75); /* Initial glow effect */
}
/* Step 2: Increase the glow effect on hover */
.glow-button:hover {
box-shadow: 0 0 30px rgba(52, 152, 219, 1), 0 0 60px rgba(52, 152, 219, 0.5); /* Stronger glow on hover */
}
</style>
</head>
<body>
<div style="text-align: center; margin-top: 100px;">
<button class="glow-button">Glow Button</button>
</div>
</body>
</html>
Output
Explanation
Step 1: Style the Button and Add the Glow Effect
The .glow-button class is used to style the button and create a glowing effect using the box-shadow property.
.glow-button {
font-size: 1.5rem;
color: white;
background-color: #3498db; /* Blue background */
padding: 10px 30px; /* Button padding */
border: none;
border-radius: 5px; /* Rounded corners */
cursor: pointer; /* Pointer cursor */
transition: box-shadow 0.3s ease; /* Smooth transition for hover */
box-shadow: 0 0 15px rgba(52, 152, 219, 0.75); /* Initial glow effect */
}
box-shadow: 0 0 15px rgba(52, 152, 219, 0.75): This creates a glowing effect around the button by adding a shadow. The first two values (0 0) define the horizontal and vertical offset, and15pxis the blur radius, which determines how far the glow spreads. The color of the glow is blue, with 75% opacity.transition: box-shadow 0.3s ease: This ensures that the glow smoothly transitions when the user hovers over the button.
Step 2: Increase the Glow on Hover
When the user hovers over the button, the glow effect becomes more pronounced.
.glow-button:hover {
box-shadow: 0 0 30px rgba(52, 152, 219, 1), 0 0 60px rgba(52, 152, 219, 0.5);
}
box-shadow: 0 0 30px rgba(52, 152, 219, 1): On hover, the glow becomes stronger with a blur radius of30pxand full opacity (1).0 0 60px rgba(52, 152, 219, 0.5): This second shadow creates an additional outer glow with a larger blur radius of60px, giving the button a more dramatic glowing effect.
Customization
Change the Glow Color
You can easily change the glow color by modifying the rgba color values in the box-shadow property. For example, for a green glow:
.glow-button {
box-shadow: 0 0 15px rgba(46, 204, 113, 0.75);
}
.glow-button:hover {
box-shadow: 0 0 30px rgba(46, 204, 113, 1), 0 0 60px rgba(46, 204, 113, 0.5);
}
Add Animation to the Glow Effect
You can add continuous pulsing animation to the button using CSS @keyframes:
@keyframes glowPulse {
0% {
box-shadow: 0 0 15px rgba(52, 152, 219, 0.75);
}
50% {
box-shadow: 0 0 30px rgba(52, 152, 219, 1), 0 0 60px rgba(52, 152, 219, 0.5);
}
100% {
box-shadow: 0 0 15px rgba(52, 152, 219, 0.75);
}
}
.glow-button {
animation: glowPulse 2s infinite; /* Continuous glow animation */
}
This animation creates a continuous pulsing glow effect around the button.
Conclusion
Adding a glow effect to a button in CSS is easy and can make your call-to-action elements stand out. By using the box-shadow property, you can create a glowing button with various colors and intensities. Adding hover effects or animations further enhances the visual appeal and interactivity of the button, making it more engaging for users.
Comments
Post a Comment
Leave Comment