WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
icône de médias sociaux avec survol
2423
Andev.web
Ouvrir dans l'éditeur
Video
Publiez votre code
4
Recommandé
28 May 2025
Un code de Metehan
12 January 2025
Un code de Mikeykun
19 October 2024
Code de la barre de navigation HTML CSS
HTML
Copy
Andev Web
CSS
Copy
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background-color: #222221; display: flex; justify-content: center; align-items: center; } ul { display: flex; list-style: none; gap: 2.5rem; } .item a { text-decoration: none; width: 4.8rem; height: 4.8rem; background-color: #f0f9fe; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; border: 3px solid #f0f9fe; overflow: hidden; } .item a::before { content: ""; position: absolute; width: 100%; height: 100%; background: var(--bg-color); z-index: 0; scale: 1 0; transform-origin: bottom; transition: scale 0.5s ease; } .item:hover a::before { scale: 1 1; } .icon { font-size: 2rem; color: hsl(203, 92%, 8%); transition: 0.5s ease; z-index: 2; } .item a:hover .icon { color: #fff; transform: rotateY(360deg); } .item:nth-child(1) { --bg-color: linear-gradient(to bottom right, #f9ce34, #ee2a7b, #6228d7); } .item:nth-child(2) { --bg-color: #0077b5; } .item:nth-child(3) { --bg-color: #ff0000; } .item:nth-child(4) { --bg-color: #000; }
JS
Copy