WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
button Irani
1083
AmirAliAkrami
Open In Editor
Publish Your Code
Recommended
21 October 2024
Firefly Button
31 January 2025
button more
24 May 2025
Neumorphism Dark Submit Button
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) */