WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
3D Social Icon Code
5180
codex
Open In Editor
Publish Your Code
Recommended
10 August 2024
HTML Login Form Code
15 May 2025
A Code by facontheo1
31 May 2025
A Code by alejandrokundrah
HTML
Copy
Social Icons
W
Webleb
@web_leb
125k+ Followers
Tiktok
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap"); body{ display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #212121; font-family: "Montserrat"; overflow: hidden; } .tooltip-container { position: relative; cursor: pointer; transition: all 0.2s; font-size: 17px; border-radius: 10px; } .tooltip { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 10px; opacity: 0; pointer-events: none; transition: all 0.3s; border-radius: 15px; box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2), inset -5px -5px 15px rgba(255, 255, 255, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1); } .profile { background: #2a2b2f; border-radius: 10px 15px; padding: 10px; border: 1px solid #52382f; } .tooltip-container:hover .tooltip { top: -150px; opacity: 1; visibility: visible; pointer-events: auto; } .icon { text-decoration: none; color: #fff; display: block; position: relative; } .layer { width: 55px; height: 55px; transition: transform 0.3s; } .icon:hover .layer { transform: rotate(-35deg) skew(20deg); } .layer span { position: absolute; top: 0; left: 0; height: 100%; width: 100%; border: 1px solid #fff; border-radius: 15px; transition: all 0.3s; } .layer span, .text { color: #fff; border-color: #fff; } .icon:hover.layer span { box-shadow: -1px 1px 3px #e6683c; } .icon .text { position: absolute; left: 50%; bottom: -5px; opacity: 0; font-weight: 500; transform: translateX(-50%); transition: bottom 0.3s ease, opacity 0.3s ease; } .icon:hover .text { bottom: -35px; opacity: 1; } .icon:hover .layer span:nth-child(1) { opacity: 0.2; } .icon:hover .layer span:nth-child(2) { opacity: 0.4; transform: translate(5px, -5px); } .icon:hover .layer span:nth-child(3) { opacity: 0.6; transform: translate(10px, -10px); } .icon:hover .layer span:nth-child(4) { opacity: 0.8; transform: translate(15px, -15px); } .icon:hover .layer span:nth-child(5) { opacity: 1; transform: translate(20px, -20px); } .titkokSVG { font-size: 25px; display: flex; align-items: center; justify-content: center; background:#f5f5f5; } .user { display: flex; gap: 10px; } .img { width: 50px; height: 50px; font-size: 25px; font-weight: 700; border: 1px solid #e6683c; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #fff; } .name { font-size: 17px; font-weight: 700; color: #fff; } .details { display: flex; flex-direction: column; gap: 0; color: #fff; } .about { color: #ccc; padding-top: 5px; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */