WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un code par ytr3d3
981
ytr3d3
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
14 June 2025
Un code de Metehan
10 December 2024
Un code par staticbug455
6 October 2025
Extrait de code d'animation CSS Maze
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) */