WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
pulsante Irani
960
AmirAliAkrami
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
19 May 2025
pulsante dom
21 October 2024
Pulsante lucciola
3 March 2025
Pulsante scuro e chiaro
HTML
Copy
click
click
CSS
Copy
.container { width: 1000px; display: flex; flex-wrap: wrap; justify-content: center; gap: 50px; } .container .btn { position: relative; top: 0; left: 0; width: 250px; height: 50px; margin: 0; display: flex; justify-content: center; align-items: center; } .container .btn a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.05); box-shadow: 0 15px 15px rgb(0 0 0 / 37%); border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgb(255 255 255 / 71%); border-radius: 30px; padding: 10px; letter-spacing: 1px; text-decoration: none; overflow: hidden; color: #fff; font-weight: 400px; z-index: 1; transition: 0.5s; backdrop-filter: blur(15px); } .container .btn:hover a { letter-spacing: 3px; } .container .btn a::before { content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent); transform: skewX(45deg) translate(0); transition: 0.5s; filter: blur(0px); } .container .btn:hover a::before { transform: skewX(45deg) translate(200px); } .container .btn::before { content: ""; position: absolute; left: 50%; transform: translatex(-50%); bottom: -5px; width: 1px; height: 14px; background: #f00; border-radius: 10px; transition: 0.5s; transition-delay: 0.5; } .container .btn:hover::before /*lightup button*/ { bottom: 0; height: 50%; width: 80%; border-radius: 30px; } .container .btn::after { content: ""; position: absolute; left: 50%; transform: translatex(-50%); top: -3px; width: 30px; height: 55px; background: #f00; border-radius: 10px; transition: 0.5s; transition-delay: 0.5; } .container .btn:hover::after /*lightup button*/ { top: 0; height: 50%; width: 80%; border-radius: 30px; } .container .btn:nth-child(1)::before, /*chnage 1*/ .container .btn:nth-child(1)::after { background: #da0000; box-shadow: 0 0 5px #da0000, 0 0 15px #da0000, 0 0 30px #da0000, 0 0 60px #da0000; } .container .btn:nth-child(2)::before, /* 2*/ .container .btn:nth-child(2)::after { background: #08ab26; box-shadow: 0 0 5px #08ab26, 0 0 15px #08ab26, 0 0 30px #08ab26, 0 0 60px #18ce39; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */