WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Icônes sociales animées
7343
codex
Ouvrir dans l'éditeur
Video
Publiez votre code
10
Recommandé
11 July 2025
Menu à bascule CSS avec icônes Font Awesome
6 May 2024
Icônes d'effet de survol
25 September 2025
Cases à cocher CSS animées avec SVG et JavaScript
HTML
Copy
Webleb
CSS
Copy
body { margin:0; padding:0; background: #abbaab; /* fallback for old browsers */ background: -webkit-linear-gradient(to left, #ffffff, #abbaab); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, #ffffff, #abbaab); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } ul { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); margin:0; padding:0; display:flex; } ul li { list-style:none; } ul li a { display:block; position:relative; width:100px; height:100px; line-height:100px; font-size:40px; text-align:center; text-decoration:none; color:#404040; margin: 0 30px; transition:.5s; } ul li a span { position:absolute; transition: transform .5s; } ul li a span:nth-child(1), ul li a span:nth-child(3){ width:100%; height:3px; background:#404040; } ul li a span:nth-child(1) { top:0; left:0; transform-origin: right; } ul li a:hover span:nth-child(1) { transform: scaleX(0); transform-origin: left; transition:transform .5s; } ul li a span:nth-child(3) { bottom:0; left:0; transform-origin: left; } ul li a:hover span:nth-child(3) { transform: scaleX(0); transform-origin: right; transition:transform .5s; } ul li a span:nth-child(2), ul li a span:nth-child(4){ width:3px; height:100%; background:#404040; } ul li a span:nth-child(2) { top:0; left:0; transform:scale(0); transform-origin: bottom; } ul li a:hover span:nth-child(2) { transform: scale(1); transform-origin: top; transition:transform .5s; } ul li a span:nth-child(4) { top:0; right:0; transform:scale(0); transform-origin: top; } ul li a:hover span:nth-child(4) { transform: scale(1); transform-origin: bottom; transition:transform .5s; } .facebook:hover { color: #3b5998; } .facebook:hover span { background: #3b5998; } .twitter:hover { color: #1da1f2; } .twitter:hover span { background: #1da1f2; } .instagram:hover { color: #c32aa3; } .instagram:hover span { background: #c32aa3; } .google:hover { color: #dd4b39; } .google:hover span { background: #dd4b39; } ul li a .twitter { color: #1da1f2; } ul li a:hover:nth-child(3) { color: #c32aa3; } ul li a:hover:nth-child(4) { color: #dd4b39; }
JS
Copy
//Nothing to Copy