WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
2528
Andev.web
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
25 March 2025
URL laden
29 January 2025
Ein Code von sheeshokaokayokay
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