WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Iconos sociales con HTML
5219
webleb
Publica tu código
Recomendado
21 July 2023
Formulario con fondo de vídeo
7 March 2025
Crossy Road con tres.js
23 July 2025
Estructura HTML del reproductor de iPod neumórfico
index.html
Copy
Webleb
styles.css
Copy
body{ height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; background: #0F2027; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .card { width: fit-content; height: fit-content; background-color: rgb(238, 238, 238); display: flex; align-items: center; justify-content: center; padding: 25px 25px; border-radius: 15px; gap: 20px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055); } a{ text-decoration: none!important; } .socialContainer { width: 52px; height: 52px; background: #0F2027; /* fallback for old browsers */ background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ display: flex; align-items: center; justify-content: center; overflow: hidden; transition-duration: .3s; border-radius: 15px; } .containerOne:hover { background-color: #d62976; transition-duration: .3s; } .containerTwo:hover { background-color: #00acee; transition-duration: .3s; } .containerThree:hover { background-color: #0072b1; transition-duration: .3s; } .containerFour:hover { background-color: #128C7E; transition-duration: .3s; } .socialContainer:active { transform: scale(0.9); transition-duration: .3s; } .socialIcon { color: white; } .socialContainer:hover .socialIcon { animation: slide-in-top 0.3s both; } @keyframes slide-in-top { 0% { transform: translateY(-50px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
main.js
Copy
// Nothing to copy