Let’s create a Glowing Firefly Button using HTML, CSS, and JavaScript. This button will feature a firefly-like glow effect, making it visually captivating and interactive.
We’ll use HTML for the structure, CSS for the styling and animations, and JavaScript to add some interactive elements to enhance the glowing effect.
Let’s get started on building the Glowing Firefly Button. Whether you’re a beginner or an experienced developer, this project offers a great way to practice your web development skills and create a visually engaging, interactive button. Let’s make our button glow like fireflies!
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Glowing Firefly button).
HTML :
This HTML code creates a “Firefly button” with glowing and animated firefly effects using CSS and JavaScript. It links to external style and script files, including TailwindCSS for utility styling and Kinet for smooth animations. The button is wrapped in an anchor element and includes several span elements styled as dots, each with unique animations to mimic firefly movements around the button. Additionally, a circle element is included for further animation, controlled by the linked script.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Firefly button</title>
</head>
<body>
<a class="button-wrapper">
<span class="dot dot-1"></span>
<span class="dot dot-2"></span>
<span class="dot dot-3"></span>
<span class="dot dot-4"></span>
<span class="dot dot-5"></span>
<span class="dot dot-6"></span>
<span class="dot dot-7"></span>
<span class="button bg-yellow-500 px-16 py-4 rounded-full uppercase">Button<span>
</a>
<div id="circle" class="circle bg-yellow-500"></div>
<script src='https://unpkg.com/kinet@2.2.1/dist/kinet.min.js'></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="./script.js"></script>
</body>
</html>
CSS :
This CSS code styles a webpage with a black background and centers the content using flexbox. It includes styles for glowing circles and a button with glowing effects on hover. The .circle class styles small, glowing circles with box shadows for an intense light effect. The .button-wrapper and .button classes style a button with additional glowing effects when hovered. The .dot classes position small elements around the button, giving each a unique speed, size, and rotation for an animated effect. The keyframes dimFirefly and hoverFirefly create animations for changing opacity and position, mimicking the movement and glowing of fireflies.
html, body {
background: black;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Styling for the glowing circles */
.circle {
width: 8px;
height: 8px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin: -4px 0 0 -4px;
pointer-events: none;
mix-blend-mode: screen;
z-index: 10;
box-shadow: 0px 0px 8px 0px #FDFCA9 inset, 0px 0px 24px 0px #FFEB3B, 0px 0px 8px 0px #FFFFFF42;
}
.button-wrapper {
position: relative;
}
.button {
z-index: 1;
position: relative;
text-decoration: none;
text-align: center;
appearance: none;
display: inline-block;
}
/* Styling for the button's glowing effect on hover */
.button::before {
content: "";
box-shadow: 0px 0px 24px 0px #FFEB3B;
mix-blend-mode: screen;
transition: opacity 0.3s;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
border-radius: 999px;
opacity: 0;
}
/* Additional glowing effect for the button */
.button::after {
content: "";
box-shadow: 0px 0px 23px 0px #FDFCA9 inset, 0px 0px 8px 0px #FFFFFF42;
transition: opacity 0.3s;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
border-radius: 999px;
opacity: 0;
}
.button-wrapper:hover {
.button::before, .button::after {
opacity: 1;
}
.dot {
transform: translate(0, 0) rotate(var(--rotatation));
}
.dot::after {
animation-play-state: running;
}
}
/* Styling for individual dots */
.dot {
display: block;
position: absolute;
transition: transform calc(var(--speed) / 12) ease;
width: var(--size);
height: var(--size);
transform: translate(var(--starting-x), var(--starting-y)) rotate(var(--rotatation));
}
.dot::after {
content: "";
animation: hoverFirefly var(--speed) infinite, dimFirefly calc(var(--speed) / 2) infinite calc(var(--speed) / 3);
animation-play-state: paused;
display: block;
border-radius: 100%;
background: yellow;
width: 100%;
height: 100%;
box-shadow: 0px 0px 6px 0px #FFEB3B, 0px 0px 4px 0px #FDFCA9 inset, 0px 0px 2px 1px #FFFFFF42;
}
.dot-1 {
--rotatation: 0deg;
--speed: 14s;
--size: 6px;
--starting-x: 30px;
--starting-y: 20px;
top: 2px;
left: -16px;
opacity: 0.7;
}
.dot-2 {
--rotatation: 122deg;
--speed: 16s;
--size: 3px;
--starting-x: 40px;
--starting-y: 10px;
top: 1px;
left: 0px;
opacity: 0.7;
}
.dot-3 {
--rotatation: 39deg;
--speed: 20s;
--size: 4px;
--starting-x: -10px;
--starting-y: 20px;
top: -8px;
right: 14px;
}
.dot-4 {
--rotatation: 220deg;
--speed: 18s;
--size: 2px;
--starting-x: -30px;
--starting-y: -5px;
bottom: 4px;
right: -14px;
opacity: 0.9;
}
.dot-5 {
--rotatation: 190deg;
--speed: 22s;
--size: 5px;
--starting-x: -40px;
--starting-y: -20px;
bottom: -6px;
right: -3px;
}
.dot-6 {
--rotatation: 20deg;
--speed: 15s;
--size: 4px;
--starting-x: 12px;
--starting-y: -18px;
bottom: -12px;
left: 30px;
opacity: 0.7;
}
.dot-7 {
--rotatation: 300deg;
--speed: 19s;
--size: 3px;
--starting-x: 6px;
--starting-y: -20px;
bottom: -16px;
left: 44px;
}
/* Keyframe animations */
@keyframes dimFirefly {
0% {
opacity: 1;
}
25% {
opacity: 0.4;
}
50% {
opacity: 0.8;
}
75% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@keyframes hoverFirefly {
0% {
transform: translate(0, 0);
}
12% {
transform: translate(3px, 1px);
}
24% {
transform: translate(-2px, 3px);
}
37% {
transform: translate(2px, -2px);
}
55% {
transform: translate(-1px, 0);
}
74% {
transform: translate(0, 2px);
}
88% {
transform: translate(-3px, -1px);
}
100% {
transform: translate(0, 0);
}
}
JavaScript :
This JavaScript code creates a Kinet instance to handle smooth animations with custom settings for acceleration and friction. It selects an HTML element with the ID ‘circle’ and sets up an event listener for the ‘tick’ event from Kinet to transform the circle’s position and rotation based on mouse movements. When the mouse moves, it triggers the Kinet instance to animate the circle’s x and y coordinates, causing it to follow the cursor. Additionally, it logs ‘start’ and ‘end’ to the console when the animation starts and ends.
// create instance of kinet with custom settings
var kinet = new Kinet({
acceleration: 0.02,
friction: 0.25,
names: ["x", "y"],
});
// select circle element
var circle = document.getElementById('circle');
// set handler on kinet tick event
kinet.on('tick', function(instances) {
circle.style.transform = `translate3d(${ (instances.x.current) }px, ${ (instances.y.current) }px, 0) rotateX(${ (instances.x.velocity/2) }deg) rotateY(${ (instances.y.velocity/2) }deg)`;
});
// call kinet animate method on mousemove
document.addEventListener('mousemove', function (event) {
kinet.animate('x', event.clientX - window.innerWidth/2);
kinet.animate('y', event.clientY - window.innerHeight/2);
});
// log
kinet.on('start', function() {
console.log('start');
});
kinet.on('end', function() {
console.log('end');
});
In conclusion, creating a Glowing Firefly Button using HTML, CSS, and JavaScript has been an exciting and rewarding project. By combining HTML for structure, CSS for styling and animations, and JavaScript for interactivity, we’ve crafted a visually captivating button with a firefly-like glow effect.
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
