WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Código de Icono Social en 3D
5727
codex
Abrir en el editor
Video
Publica tu código
7
Recomendado
21 June 2024
Palanca dentada
15 May 2025
Un código de nasmacadic
26 October 2024
Botón interruptor de luz oscura.
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) */