Back
Crafting a Button with Dynamic Drill Glow Effect
Discover how to create a visually captivating button that comes alive with a glowing drill effect on click.
Introduction
In this tutorial, we're going to create an engaging button with a glow effect that mimics the action of a drill being activated. This component uses CSS animations to bring interactive elements to life, grabbing user attention with its playful design.HTML
The HTML structure is simple and contained within a div to center-align the button on the page. We have a single button element with an onclick event to trigger the glow effect.
<div class="button-container">
<button class="drill-button" onclick="drillGlowEffect()">Press Me!</button>
</div>
JavaScript
In our JavaScript, we define the functiondrillGlowEffect to add the 'active-drill' class to our button. This class triggers the animation and transforms the button with a glowing effect, lasting for one second before the class is removed to reset the state.
function drillGlowEffect() {
const button = document.querySelector('.drill-button');
button.classList.add('active-drill');
setTimeout(() => {
button.classList.remove('active-drill');
}, 1000);
}
CSS
The CSS provides styling for the button and the glow effect. The button itself has a friendly, inviting appearance with smooth edges and a vibrant color. When activated, the glow effect is created with box shadows, giving the illusion of a glowing drill motion through layered shadows animated in the@keyframes rule.
.button-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.drill-button {
background-color: #ff574d;
border: none;
padding: 15px 30px;
font-size: 18px;
color: #fff;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
}
.active-drill {
box-shadow: 0 0 0 10px rgba(255, 87, 77, 0.25), 0 0 0 20px rgba(255, 87, 77, 0.15), 0 0 0 30px rgba(255, 87, 77, 0.05);
transform: scale(1.15);
animation: glow-pulse 1s ease-in-out;
}
@keyframes glow-pulse {
0% {
box-shadow: 0 0 0 10px rgba(255, 87, 77, 0.25), 0 0 0 20px rgba(255, 87, 77, 0.15), 0 0 0 30px rgba(255, 87, 77, 0.05);
}
50% {
box-shadow: 0 0 0 14px rgba(255, 87, 77, 0.3), 0 0 0 28px rgba(255, 87, 77, 0.2), 0 0 0 42px rgba(255, 87, 77, 0.1);
}
100% {
box-shadow: 0 0 0 10px rgba(255, 87, 77, 0.25), 0 0 0 20px rgba(255, 87, 77, 0.15), 0 0 0 30px rgba(255, 87, 77, 0.05);
}
}
Wrapping Up
There you have it—a simple yet powerful drill-like glowing button effect that can add a playful and interactive element to any website. The use of CSS animations to create a responsive and engaging user interface contributes to a memorable user experience. Try experimenting with different animation timings, colors, or scales to personalize this component even further!Whole code
<div class="button-container">
<button class="drill-button" onclick="drillGlowEffect()">Press Me!</button>
</div>
<script>
function drillGlowEffect() {
const button = document.querySelector('.drill-button');
button.classList.add('active-drill');
setTimeout(() => {
button.classList.remove('active-drill');
}, 1000);
}
</script>
<style>
.button-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.drill-button {
background-color: #ff574d;
border: none;
padding: 15px 30px;
font-size: 18px;
color: #fff;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
}
.active-drill {
box-shadow: 0 0 0 10px rgba(255, 87, 77, 0.25), 0 0 0 20px rgba(255, 87, 77, 0.15), 0 0 0 30px rgba(255, 87, 77, 0.05);
transform: scale(1.15);
animation: glow-pulse 1s ease-in-out;
}
@keyframes glow-pulse {
0% {
box-shadow: 0 0 0 10px rgba(255, 87, 77, 0.25), 0 0 0 20px rgba(255, 87, 77, 0.15), 0 0 0 30px rgba(255, 87, 77, 0.05);
}
50% {
box-shadow: 0 0 0 14px rgba(255, 87, 77, 0.3), 0 0 0 28px rgba(255, 87, 77, 0.2), 0 0 0 42px rgba(255, 87, 77, 0.1);
}
100% {
box-shadow: 0 0 0 10px rgba(255, 87, 77, 0.25), 0 0 0 20px rgba(255, 87, 77, 0.15), 0 0 0 30px rgba(255, 87, 77, 0.05);
}
}
</style>
Thank you for reading this article.
Comments