In the ever-evolving world of web design, standing out requires innovation and creativity. Today, we'll dive into creating a futuristic neon button with advanced animations using HTML, CSS, and JavaScript. This button isn't just any button—it's a visual experience designed to captivate users and elevate your website's aesthetic to new heights.
Check out the live demo on CodePen https://codepen.io/HanGPIIIErr/pen/ZYzzqRx
🌟 What We'll Build
- A neon button with advanced CSS animations
- Interactive hover effects that enhance user engagement
- Seamless integration with your website
- Optimized design for the upcoming trends of 2025 and beyond
đź› Technologies Used
- HTML5 for the structure
- CSS3 for styling and animations
- JavaScript for interactivity
🔧 Step-by-Step Tutorial
- Setting Up the HTML Structure
We'll start by creating the basic structure of the button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Futuristic Neon Button</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="neon-button">
<span>Enter the Arena</span>
<div class="neon-glow"></div>
<div class="neon-border"></div>
</button>
<script src="script.js"></script>
</body>
</html>
Explanation:
We include the Orbitron font for a futuristic look. Next, we'll add styles to bring our button to life. Explanation: Advanced Animations: Finally, we'll make the button functional by adding a click event. Explanation: The button redirects the user to Gladiators Battle when clicked. Included relevant keywords like "Gladiators Battle", "futuristic button", and "advanced animations". 🌌 Conclusion: A Universe of Possibilities But this is just the beginning. Dive into Gladiators Battle, where you’ll find epic battles, engaging mini-games, and a thriving community of gamers and developers. 🔗 Explore More Website: https://gladiatorsbattle.com/ Thank you for reading, and happy coding! 🌟 Feel free to customize and integrate this button into your projects. If you have any questions or need further assistance, don't hesitate to reach out in the comments below.
The button contains a for the text, and two elements for the glow and border effects.
/* style.css */
body {
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at center, #0d0d0d, #000000 70%);
height: 100vh;
margin: 0;
overflow: hidden;
}
.neon-button {
position: relative;
padding: 20px 60px;
color: #00f6ff;
font-family: 'Orbitron', sans-serif;
font-size: 28px;
letter-spacing: 2px;
text-transform: uppercase;
background: #111;
border: none;
border-radius: 15px;
cursor: pointer;
overflow: hidden;
box-shadow: inset 0 0 10px rgba(0, 246, 255, 0.3), 0 0 20px rgba(0, 246, 255, 0.6);
transition: transform 0.2s ease-in-out;
}
.neon-button:hover {
transform: scale(1.1) rotate(2deg);
box-shadow: inset 0 0 20px rgba(0, 246, 255, 0.5), 0 0 30px rgba(0, 246, 255, 0.8);
}
.neon-button span {
position: relative;
z-index: 2;
}
.neon-button::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: repeating-conic-gradient(
from 0deg,
rgba(0, 246, 255, 0.05),
rgba(0, 246, 255, 0.1) 10%,
transparent 10%,
transparent 20%
);
animation: rotate 8s linear infinite;
pointer-events: none;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.neon-button::after {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background: radial-gradient(circle at center, rgba(0, 246, 255, 0.2), transparent);
filter: blur(20px);
opacity: 0;
transition: opacity 0.5s;
border-radius: 25px;
}
.neon-button:hover::after {
opacity: 1;
}
.neon-button .neon-border {
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border: 4px double rgba(0, 246, 255, 0.7);
border-radius: 19px;
box-shadow: 0 0 20px rgba(0, 246, 255, 0.5);
animation: border-pulse 3s infinite;
pointer-events: none;
}
@keyframes border-pulse {
0% {
opacity: 0.8;
transform: scale(0.98);
}
50% {
opacity: 1;
transform: scale(1.02);
}
100% {
opacity: 0.8;
transform: scale(0.98);
}
}
.neon-button .neon-glow {
position: absolute;
top: 0;
left: -50%;
width: 200%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(0, 246, 255, 0.5), transparent);
transform: skewX(-30deg);
opacity: 0;
animation: glow-move 4s infinite;
pointer-events: none;
}
@keyframes glow-move {
0% {
opacity: 0;
transform: translateX(-100%) skewX(-30deg);
}
50% {
opacity: 1;
transform: translateX(100%) skewX(-30deg);
}
100% {
opacity: 0;
transform: translateX(200%) skewX(-30deg);
}
}
.neon-button:hover .neon-glow {
animation-play-state: running;
}
rotate Animation: Rotates the conic gradient background infinitely.
border-pulse Animation: Creates a pulsating border effect.
glow-move Animation: Adds a moving glow across the button on hover.
// script.js
document.querySelector('.neon-button').addEventListener('click', function() {
window.location.href = 'https://gladiatorsbattle.com';
});
🚀 SEO Optimization for Gladiators Battle
To ensure our button not only looks good but also enhances the SEO for Gladiators Battle, we've:
Provided a link to the Gladiators Battle website directly in the interactive button.
Made sure the tutorial is detailed, providing value to readers and encouraging them to engage with the Gladiators Battle community.
This futuristic neon button project is a small glimpse into what’s possible with HTML, CSS, and JavaScript. Whether you're a beginner or a seasoned developer, creative projects like this are an excellent way to showcase your skills and build interactive experiences.
X (formerly Twitter): https://x.com/GladiatorsBT
LinkedIn: https://www.linkedin.com/in/pierre-romain-lopez/
Discord: https://discord.gg/YBNF7KjGwx
Top comments (0)