WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un code par ledoc
2046
ledoc
Ouvrir dans l'éditeur
Video
Publiez votre code
2
Recommandé
5 May 2025
Un code par lebdev
15 May 2025
Un code de Mete
15 June 2025
Un code par securearray494
HTML
Copy
CSS
Copy
<style type="text/css"> *{ margin: 0; padding: 0; } body{ background-color: black; width: 100px; height: 100vh; } .main{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; cursor: pointer; } .icon{ position: relative; width: 80px; height: 80px; margin: 20px; border-radius: 50px; transition: all .8s; } .icon:hover{ background: #e60073; box-shadow: 0 0 20px #e60073; } .icon:hover:nth-child(2){ background: #1877f2; box-shadow: 0 0 20px #1877f2; } .icon:hover:nth-child(3){ background: #25d366; box-shadow: 0 0 20px #25d366; } .icon:hover:nth-child(4){ background: #1da1f2; box-shadow: 0 0 20px #1da1f2; } .icon i{ color: white; position: absolute;; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2em; } svg circle{ stroke-dasharray: 150; transition: all .8s; } .icon:hover svg circle{ stroke-dasharray: 220; } </style>
JS
Copy