WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Tarjeta Social en CSS
5666
DeveloperUI
Abrir en el editor
Publica tu código
Recomendado
29 September 2025
Animación de carga CSS con imagen de fondo
13 November 2024
Efecto de marco para imágenes usando CSS puro
15 March 2024
Entrada CSS animada
HTML
Copy
Social Menu
Our Socials
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); body{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Poppins'; } .main_back { position: absolute; border-radius: 10px; transform: rotate(90deg); width: 11em; height: 11em; background: linear-gradient(270deg, #03a9f4, #cc39a4, #ffb5d2); z-index: -2; box-shadow: inset 0px 0px 180px 5px #ffffff; } .main { display: flex; flex-wrap: wrap; width: 14em; align-items: center; justify-content: center; z-index: -1; } .card { width: 60px; height: 60px; border-top-left-radius: 10px; background: lightgrey; transition: .4s ease-in-out, .2s background-color ease-in-out, .2s background-image ease-in-out; background: rgba(255, 255, 255, 0.596); backdrop-filter: blur(5px); border: 1px solid transparent; -webkit-backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; } .card .instagram { opacity: 0; transition: .2s ease-in-out; } .card:nth-child(2) .twitter { opacity: 0; transition: .2s ease-in-out; } .card:nth-child(3) { border-top-right-radius: 10px; border-top-left-radius: 0px; } .card:nth-child(3) .tiktok { opacity: 0; transition: .2s ease-in-out; } .card:nth-child(4) { border-radius: 0px; } .card:nth-child(4) .facebook { opacity: 0; transition: .2s ease-in-out; } .card:nth-child(5) { border-radius: 0px; } .card:nth-child(6) { border-radius: 0px; } .card:nth-child(6) .discord { opacity: 0; transition: .2s ease-in-out; fill: #8c9eff; } .card:nth-child(7) { border-bottom-left-radius: 10px; border-top-left-radius: 0px; } .card:nth-child(7) .github { opacity: 0; transition: .2s ease-in-out; fill: black; } .card:nth-child(8) { border-radius: 0px; } .card:nth-child(8) .telegram { opacity: 0; transition: .2s ease-in-out; fill: #29b6f6; } .card:nth-child(9) { border-bottom-right-radius: 10px; border-top-left-radius: 0px; } .card:nth-child(9) .youtube { opacity: 0; transition: .2s ease-in-out; } .main:hover { width: 14em; cursor: pointer; } .main:hover .main_back { opacity: 0; } .main:hover .card { margin: .2em; border-radius: 10px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.334); background: rgba(255, 255, 255, 0.2); } .main:hover .card:nth-child(5) { border: transparent; } .main:hover .text { opacity: 0; z-index: -3; } .main:hover .youtube, .main:hover .telegram, .main:hover .github, .main:hover .tiktok, .main:hover .instagram, .main:hover .discord, .main:hover .facebook, .main:hover .twitter{ opacity: 1; } .card:nth-child(1):hover { background-color: #cc39a4; } .card:nth-child(2):hover { background-color: #03A9F4; } .card:nth-child(3):hover { background-color: #ffb5d2; } .card:nth-child(4):hover { background-color: #7baaf0; } .card:nth-child(5):hover { animation: backgroundIMG .1s; animation-fill-mode: forwards; } @keyframes backgroundIMG { 100% { background-image: linear-gradient(#2096a3,#088981,#00DDEB); } } .card:nth-child(6):hover { background-color: #8c9eff; } .card:nth-child(7):hover { background-color: rgb(153, 131, 131); } .card:nth-child(8):hover { background-color: #6fc5ed; } .card:nth-child(9):hover { background-color: rgb(255,69,0); } .card:nth-child(9) .youtube > g circle { fill: rgb(255,69,0); } .card:nth-child(9) .youtube > g path { fill: white; } .text { position: absolute; font-size: 0.7em; transition: .4s ease-in-out; color: black; text-align: center; font-weight: bold; letter-spacing: 0.33em; z-index: 3; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */