WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
5937
DeveloperUI
Apri nell'Editor
Video
Pubblica il Tuo Codice
14
Consigliato
19 May 2025
animazione moderna
17 May 2025
accesso moderno
11 January 2026
Metehan
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) */