🌐 Neon Glow Ripple Button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neon Glow Ripple Button</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #0f0c29;
background: radial-gradient(circle, #0f0c29, #302b63, #24243e);
font-family: 'Poppins', sans-serif;
}
.neon-ripple-button {
padding: 15px 50px;
font-size: 18px;
font-weight: bold;
color: #fff;
text-transform: uppercase;
background: #1f1c3e;
border: none;
border-radius: 50px;
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow: 0 0 20px #ff007f, 0 0 40px #ff007f, 0 0 60px rgba(255, 0, 127, 0.4);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.neon-ripple-button::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 0, 127, 0.4), transparent);
transform: translate(-50%, -50%) scale(0);
opacity: 0;
border-radius: 50%;
transition: transform 0.6s ease, opacity 0.6s ease;
}
.neon-ripple-button:hover {
transform: scale(1.1);
box-shadow: 0 0 30px #ff007f, 0 0 60px #ff007f, 0 0 80px rgba(255, 0, 127, 0.6);
}
.neon-ripple-button:hover::after {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
.neon-ripple-button:active {
transform: scale(0.95);
box-shadow: 0 0 15px #ff007f, 0 0 30px #ff007f, 0 0 50px rgba(255, 0, 127, 0.5);
}
</style>
</head>
<body>
<button class="neon-ripple-button">Click Me</button>
</body>
</html>
