WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
bouton Iranien
1148
AmirAliAkrami
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
22 August 2025
Exemple de boutons de contact HTML
18 February 2024
Bouton de confirmation
10 August 2025
Onglets HTML avec bouton Fermer
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) */