WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Hover effect icons
3490
Andev.web
Open In Editor
Video
Publish Your Code
12
Recommended
26 June 2024
Menu hover glow
30 March 2025
Glass effect social media buttons with neon glow
16 July 2023
HTML Social Icons
HTML
Copy
Spotify
Pinterest
Dribbble
Telegram
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); * { font-family: 'Poppins', sans-serif; } body { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; background-color: #e8e8e8; } .container { display: flex; justify-content: center; align-items: center; height: 100vh; } ul { list-style: none; } .example-2 { display: flex; justify-content: center; align-items: center; } .example-2 .icon-content { margin: 0 10px; position: relative; } .example-2 .icon-content .tooltip { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); color: #fff; padding: 6px 10px; border-radius: 15px; opacity: 0; visibility: hidden; font-size: 14px; transition: all 0.3s ease; } .example-2 .icon-content:hover .tooltip { opacity: 1; visibility: visible; top: -50px; } .example-2 .icon-content a { position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 20%; color: #4d4d4d; background-color: #ffff; transition: all 0.3s ease-in-out; } .example-2 .icon-content a:hover { box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 50%); } .example-2 .icon-content a svg { position: relative; z-index: 1; width: 30px; height: 30px; } .example-2 .icon-content a:hover { color: white; } .example-2 .icon-content a .filled { position: absolute; top: auto; bottom: 0; left: 0; width: 100%; height: 0; background-color: #000; transition: all 0.3s ease-in-out; } .example-2 .icon-content a:hover .filled { height: 100%; } .example-2 .icon-content a[data-social="spotify"] .filled, .example-2 .icon-content a[data-social="spotify"] ~ .tooltip { background-color: #1db954; } .example-2 .icon-content a[data-social="pinterest"] .filled, .example-2 .icon-content a[data-social="pinterest"] ~ .tooltip { background-color: #bd081c; } .example-2 .icon-content a[data-social="dribbble"] .filled, .example-2 .icon-content a[data-social="dribbble"] ~ .tooltip { background-color: #ea4c89; } .example-2 .icon-content a[data-social="telegram"] .filled, .example-2 .icon-content a[data-social="telegram"] ~ .tooltip { background-color: #0088cc; }
JS
Copy