WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un code par ytr3d3
563
ytr3d3
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
29 May 2025
Un code par mathieu.ratro
11 December 2024
Un code par staticcloud996
8 November 2024
envoyer des pièces tiktok à une fausse page
HTML
Copy
CodePen - Glass effect social media buttons with neon glow
CSS
Copy
html, body { background-color: #222222; transition: all 0.3s; height: 100%; } .button-container { display: flex; align-items: center; justify-content: center; height: 100%; } .glass-btn { width: 100px; height: 100px; background-color: #fafafa; display: flex; align-items: center; justify-content: center; border-radius: 7px; margin-left: 1em; margin-right: 1em; cursor: pointer; transition: all 0.3s; } .glass-btn.blue-btn { box-shadow: 0px 20px 20px -17px rgba(0, 111, 255, 0.53); } .glass-btn.blue-btn:hover { box-shadow: 0px 20px 35px -16px rgba(0, 111, 255, 0.65); } .glass-btn.blue-btn .content { font-size: 4em; font-family: "Roboto", sans-serif; background: linear-gradient(to right, #006fff, #00acff 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0px 10px 37px rgba(0, 111, 255, 0.8); } .glass-btn.red-btn { box-shadow: 0px 20px 20px -17px rgba(255, 16, 39, 0.5); } .glass-btn.red-btn:hover { box-shadow: 0px 20px 35px -16px rgba(255, 16, 39, 0.57); } .glass-btn.red-btn .content { font-size: 4em; font-family: "Roboto", sans-serif; background: linear-gradient(to right, #ff1027, #ff4f06 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0px 10px 37px rgba(255, 16, 39, 0.6); } .glass-btn.amber-btn { box-shadow: 0px 20px 20px -17px rgba(255, 159, 16, 0.53); } .glass-btn.amber-btn:hover { box-shadow: 0px 20px 35px -16px rgba(255, 159, 16, 0.6); } .glass-btn.amber-btn .content { font-size: 4em; font-family: "Roboto", sans-serif; background: linear-gradient(to right, #ff8d00, #f7ad07 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0px 10px 37px rgba(255, 94, 16, 0.7); } .glass-btn:hover { background-color: whitesmoke; transform: translateY(-5px); transition: all 0.3s; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */