Back
Crafting an Eye-Catching Glowing Button with Ripple Effect
A step-by-step guide to building a visually impressive button with a halo glow and ripple feedback to captivate your users.
HTML
Building a glowing button starts with creating a simple button element in HTML. This button will serve as the interactive element that users can click on.
<button class="glow-button" onclick="createRipple(event)">Click Me!</button>
CSS
The glow effect is achieved through CSS. We’ll start by styling the button itself, setting the padding, font size, and background color. A key element is thebox-shadow property, which gives the button its glowing effect.
.glow-button {
position: relative;
padding: 10px 20px;
font-size: 16px;
color: #ffffff;
background-color: #03a9f4;
border: none;
border-radius: 25px;
cursor: pointer;
box-shadow: 0 0 10px 0 #03a9f4;
overflow: hidden;
transition: box-shadow 0.3s, transform 0.3s;
}
.glow-button:hover {
box-shadow: 0 0 20px 0px #03a9f4;
transform: scale(1.05);
}
.glow-button:active {
transform: scale(0.95);
}
For the ripple effect, a span element is dynamically added when the button is clicked. This ripple element is styled to start small and expand over time.
.glow-button .ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.7);
transform: scale(0);
animation: ripple 0.6s linear;
}
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}
JavaScript
The JavaScript part is fairly simple but powerful. This code handles the ripple effect by creating aspan element on each click, determining its position based on where you click the button, and animating it for visual feedback.
function createRipple(event) {
const button = event.currentTarget;
const circle = document.createElement("span");
const diameter = Math.max(button.clientWidth, button.clientHeight);
const radius = diameter / 2;
circle.style.width = circle.style.height = `${diameter}px`;
circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
circle.classList.add("ripple");
const ripple = button.getElementsByClassName("ripple")[0];
if (ripple) {
ripple.remove();
}
button.appendChild(circle);
}
Advanced Customizations
Advanced users can extend this glow button with various customizations to suit their project's needs. Consider the following enhancements:- Theming: Change the
background-colorandbox-shadowcolor to reflect different themes or branding guidelines. - Accessibility: Add
aria-labelto the button for better screen reader support. - Mobile Support: Ensure the button is responsive by using relative units like
emorremfor padding and font size. - Animations: Explore using CSS animations for other interactive states, like changing colors or morphing shapes on hover or focus.
Whole code
<button class="glow-button" onclick="createRipple(event)">Click Me!</button>
<script>
function createRipple(event) {
const button = event.currentTarget;
const circle = document.createElement("span");
const diameter = Math.max(button.clientWidth, button.clientHeight);
const radius = diameter / 2;
circle.style.width = circle.style.height = `${diameter}px`;
circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
circle.classList.add("ripple");
const ripple = button.getElementsByClassName("ripple")[0];
if (ripple) {
ripple.remove();
}
button.appendChild(circle);
}
</script>
<style>
.glow-button {
position: relative;
padding: 10px 20px;
font-size: 16px;
color: #ffffff;
background-color: #03a9f4;
border: none;
border-radius: 25px;
cursor: pointer;
box-shadow: 0 0 10px 0 #03a9f4;
overflow: hidden;
transition: box-shadow 0.3s, transform 0.3s;
}
.glow-button:hover {
box-shadow: 0 0 20px 0px #03a9f4;
transform: scale(1.05);
}
.glow-button:active {
transform: scale(0.95);
}
.glow-button .ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.7);
transform: scale(0);
animation: ripple 0.6s linear;
}
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}
</style>
Thank you for reading this article.
Comments