Effet de survol de bouton CSS

Ouvrir dans l'éditeur Publiez votre code

Recommandé

15 October 2024

Extrait HTML d'animation de porte de salle CSS

10 February 2025

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;
}

Effet de survol de bouton CSS

Recommandé

Barre de navigation bleue

Extrait HTML d'animation de porte de salle CSS

bouton

HTML

CSS

JS

Recommandé

Barre de navigation bleue

Extrait HTML d'animation de porte de salle CSS

bouton

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS