WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Social Icons CSS/HTML
13132
darkcoder
Video
Publish Your Code
Recommended
14 June 2024
Animated card of social media
26 August 2024
Social icons with reflections
16 July 2023
HTML Social Icons
index.html
Copy
Webleb
styles.css
Copy
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } *:focus, *:active { outline: none !important; -webkit-tap-highlight-color: transparent; } html, body { display: grid; height: 100%; width: 100%; font-family: "Poppins", sans-serif; place-items: center; background: linear-gradient(315deg, #ffffff, #d7e1ec); } .wrapper { display: inline-flex; list-style: none; } .wrapper .icon { position: relative; background: #ffffff; border-radius:15px; padding: 15px; margin: 10px; width: 50px; height: 50px; font-size: 18px; display: flex; justify-content: center; align-items: center; flex-direction: column; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .wrapper .tooltip { position: absolute; top: 0; font-size: 14px; background: #ffffff; color: #ffffff; padding: 5px 8px; border-radius: 5px; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .wrapper .tooltip::before { position: absolute; content: ""; height: 8px; width: 8px; background: #ffffff; bottom: -3px; left: 50%; transform: translate(-50%) rotate(45deg); transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .wrapper .icon:hover .tooltip { top: -45px; opacity: 1; visibility: visible; pointer-events: auto; } .wrapper .icon:hover span, .wrapper .icon:hover .tooltip { text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); } .wrapper .facebook:hover, .wrapper .facebook:hover .tooltip, .wrapper .facebook:hover .tooltip::before { background: #1877F2; color: #ffffff; } .wrapper .tiktok:hover, .wrapper .tiktok:hover .tooltip, .wrapper .tiktok:hover .tooltip::before { background: #000000; color: #ffffff; } .wrapper .instagram:hover, .wrapper .instagram:hover .tooltip, .wrapper .instagram:hover .tooltip::before { background: #7a21b6; color: #ffffff; } .wrapper .youtube:hover, .wrapper .youtube:hover .tooltip, .wrapper .youtube:hover .tooltip::before { background: #CD201F; color: #ffffff; }
main.js
Copy
Nothing to copy