WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ein Code von ytr3d3
982
ytr3d3
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
25 April 2025
Ein Code von Metehan
22 April 2025
Ein Code von Metehan
27 April 2025
Ein Code von Metehan
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) */