WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
3डी सोशल आइकन कोड
4832
codex
संपादक में खोलें
अपना कोड प्रकाशित करें
क्या आपको एक वेबसाइट चाहिए?
अनुशंसित
16 December 2024
स्मार्टफंक्शन263 द्वारा एक कोड
3 December 2024
securecode635 द्वारा एक कोड
28 March 2025
mcdonge13 द्वारा एक कोड
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) */