WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Effet de survol de bouton CSS
4615
codex
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
15 October 2024
Barre de navigation bleue
4 September 2025
Extrait HTML d'animation de porte de salle CSS
10 February 2025
bouton
HTML
Copy
Webleb
Hover Me
CSS
Copy
body { background: #44A08D; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #093637, #44A08D); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #093637, #44A08D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .btn { cursor: pointer; position: relative; padding: 10px 20px; background: rgb(3, 247, 226); font-size: 28px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; transition: all 1s; } .btn:after, .btn:before { content: " "; width: 10px; height: 10px; position: absolute; border: 0px solid #fff; transition: all 1s; } .btn:after { top: -1px; left: -1px; border-top: 5px solid black; border-left: 5px solid black; } .btn:before { bottom: -1px; right: -1px; border-bottom: 5px solid black; border-right: 5px solid black; } .btn:hover { border-top-right-radius: 0px; border-bottom-left-radius: 0px; } .btn:hover:before, .btn:hover:after { width: 100%; height: 100%; } .data-container { background: #ffebee; height: 100vh; display: flex; justify-content: center; align-items: center; }
JS
Copy
// Nothing to Copy