lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
99 lines (85 loc) • 4.67 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="https://muhilanproj.online/webspace4u/logo.png">
<title>@codewith_muhilan</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@keyframes neon-pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.neon-pulse-animation:hover {
animation: neon-pulse 0.6s ease-in-out infinite;
}
@keyframes neon-bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.neon-bounce-animation:hover {
animation: neon-bounce 0.3s ease-in-out;
}
</style>
</head>
<body class="flex justify-center items-center min-h-screen bg-black font-bold font-primarylw">
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl ">
<div class="relative text-center flex items-center justify-center flex-wrap gap-4">
<!-- First Button: Neon Blue -->
<div class="flex flex-wrap justify-center items-center h-screen font-primarylw">
<a href="javascript:void(0)"
class="relative inline-block px-6 py-3 m-10 text-[#00fffc] uppercase text-lg tracking-wide overflow-hidden transition-all duration-500 hover:bg-[#00fffc] hover:text-black hover:shadow-[0_0_5px_#00fffc,0_0_25px_#00fffc,0_0_50px_#00fffc,0_0_200px_#00fffc] neon-pulse-animation neon-bounce-animation">
<span
class="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent to-[#00fffc]"></span>
<span
class="absolute top-[-100%] right-0 w-[2px] h-full bg-gradient-to-b from-transparent to-[#00fffc]"></span>
<span
class="absolute bottom-0 right-0 w-full h-[2px] bg-gradient-to-l from-transparent to-[#00fffc]"></span>
<span
class="absolute bottom-[-100%] left-0 w-[2px] h-full bg-gradient-to-t from-transparent to-[#00fffc]"></span>
Neon Button
</a>
<!-- Second Button: Neon Green -->
<a href="javascript:void(0)"
class="relative inline-block px-6 py-3 m-10 text-[#0BFF27] uppercase text-lg tracking-wide overflow-hidden transition-all duration-500 hover:bg-[#0BFF27] hover:text-black hover:shadow-[0_0_5px_#4caf50,0_0_25px_#4caf50,0_0_50px_#4caf50,0_0_200px_#4caf50] neon-pulse-animation neon-bounce-animation">
<span
class="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent to-[#0BFF27]"></span>
<span
class="absolute top-[-100%] right-0 w-[2px] h-full bg-gradient-to-b from-transparent to-[#0BFF27]"></span>
<span
class="absolute bottom-0 right-0 w-full h-[2px] bg-gradient-to-l from-transparent to-[#0BFF27]"></span>
<span
class="absolute bottom-[-100%] left-0 w-[2px] h-full bg-gradient-to-t from-transparent to-[#0BFF27]"></span>
Neon Button
</a>
<!-- Third Button: Neon Pink -->
<a href="javascript:void(0)"
class="relative inline-block px-6 py-3 m-10 text-[#FF4C9D] uppercase text-lg tracking-wide overflow-hidden transition-all duration-500 hover:bg-[#FF4C9D] hover:text-black hover:shadow-[0_0_5px_#ec4899,0_0_25px_#ec4899,0_0_50px_#ec4899,0_0_200px_#ec4899] neon-pulse-animation neon-bounce-animation">
<span
class="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent to-[#FF4C9D]"></span>
<span
class="absolute top-[-100%] right-0 w-[2px] h-full bg-gradient-to-b from-transparent to-[#FF4C9D]"></span>
<span
class="absolute bottom-0 right-0 w-full h-[2px] bg-gradient-to-l from-transparent to-[#FF4C9D]"></span>
<span
class="absolute bottom-[-100%] left-0 w-[2px] h-full bg-gradient-to-t from-transparent to-[#FF4C9D]"></span>
Neon Button
</a>
</div>
</div>
</div>
</body>
</html>