WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Iconos sociales con reflejos
2529
Andev.web
Abrir en el editor
Publica tu código
Recomendado
21 October 2024
Goku contra Vegeta
27 November 2024
Control deslizante de imágenes adaptable
5 September 2024
Generador de contraseñas (NEGRO)
HTML
Copy
Andev Web
CSS
Copy
body { display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; background-color: #f9f7f7; margin: 0; padding: 0; } .social-login-icons { display: flex; align-items: center; gap: 10px; -webkit-box-reflect: below 5px linear-gradient(transparent, #00000055); } .social-login-icons svg { width: 40px; } .social-icon-1, .social-icon-1-1, .social-icon-2, .social-icon-2-2, .social-icon-3, .social-icon-3-3, .social-icon-4, .social-icon-4-4 { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50px; margin: 20px 0 0px 0; } .icon svg { fill: #111; } .socialcontainer { height: 80px; overflow: hidden; } .social-icon-1 { transition-duration: 0.4s; background-color: rgb(0, 0, 0); transition-timing-function: cubic-bezier(0.46, -0.78, 0.5, 1.56); } .social-icon-1 svg, .social-icon-2 svg, .social-icon-3 svg, .social-icon-4 svg { opacity: 0; transition-duration: 0.5s; transition-delay: 0.2s; } .social-icon-1-1 { transition-duration: 0.4s; background-color: rgb(0, 0, 0, 0); } .socialcontainer:hover .social-icon-1 { transform: translateY(-70px); } .socialcontainer:hover .social-icon-1 svg, .socialcontainer:hover .social-icon-2 svg, .socialcontainer:hover .social-icon-3 svg, .socialcontainer:hover .social-icon-4 svg { opacity: 1; } .social-icon-2 { transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.46, -0.78, 0.5, 1.56); background: linear-gradient( 72.44deg, #ff7a00 11.92%, #ff0169 51.56%, #d300c5 85.69% ); } .socialcontainer:hover .social-icon-2 { transform: translateY(-70px); } .social-icon-3 { transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.46, -0.78, 0.5, 1.56); background: #316ff6; } .socialcontainer:hover .social-icon-3 { transform: translateY(-70px); } .social-icon-4 { transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.46, -0.78, 0.5, 1.56); background: linear-gradient( 180deg, rgba(129, 34, 144, 1) 0%, rgba(77, 34, 124, 1) 91% ); } .socialcontainer:hover .social-icon-4 { transform: translateY(-70px); }
JS
Copy