Transitions CSS : Boutons [CSS18]

Cet exercice consiste à reproduire à partir d’un modèle des boutons en respectant des effets de transitions CSS

Consignes de l’exercice

Créez un nouveau document HTML.

Associez une feuille de style au document HTML.

Reproduisez le bouton ci-dessous en utilisant un lien html <a> et en respectant les effets de transition.

<a class="btn1" href="#">Bouton</a>

.btn1 {
    font-size: 1.5rem;
    padding: 0.7rem 1rem;
    border: 4px solid #999;
    color: #999;
    text-decoration: none;
    transition: all 0.5s;
}
.btn1:hover {
    border-color: #0ec4df;
    color: #0ec4df;
    background-color: #cfd9da;
}

Dupliquez le code du bouton que vous venez de faire et adaptez-le pour créer le bouton ci-dessous en respectant les effets de transition différents sur le mouse hover et le mouse out.

Attention ! Vous devez conserver tous les boutons de l’exercice.

<a class="btn btn1" href="#">Bouton</a>
<a class="btn btn2" href="#">Bouton</a>

.btn {
    font-size: 1.5rem;
    padding: 0.7rem 1rem;
    text-decoration: none;
}
.btn2 {
    border: 4px solid #999;
    color: #999;
    transition-property: border-color, color, background-color, transform;
    transition-duration: 0.5s, 0.5s, 0.5s, 1.5s;
    transform: rotateY(0deg);
}
.btn2:hover {
    border-color: #ca1919;
    color: #ca1919;
    background-color: #e1b3b3;
    transform: rotateY(360deg);
    transition-property: border-color, color, background-color;
    transition-duration: 2s;
}

Reproduisez le bouton de l’exemple ci-dessous en utilisant un lien html <a> et un élément <span>qui contient un caractère spécial en HTML. Toujours en respectant les effets de transition.

<a class="btn btn3" href="#">Survolez-moi<span>❯</span></a>

.btn3 {
    background-color: #f27935;
    border-radius: 30px;
    font-size: 1.5rem;
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
    transition: all 0.5s;
    border: 2px solid #f27935;
}
.btn3 span {
    display: block;
    position: absolute;
    top: 2px;
    right: 2px;
    margin: 0.3rem;
    width: 1.8rem;
    height: 1.8rem;
    line-height: 1.7rem;
    background-color: transparent;
    border-radius: 50%;
    text-align: center;
    transition: all 0.5s;
}
.btn3:hover {
    border-color: #fff;
}
.btn3:hover span {
    color: #f27935;
    background-color: #fff;
    transform: rotate(-360deg);
}

Reproduisez le bouton ci-dessous en utilisant un lien html <a> et en respectant les effets de transition et notamment l’effet de flip lors du clic.

.btn4 {
    background-color: #f2225a;
    color: #fff;
    position: relative;
    top: -5px;
    padding: 0.75rem 1.2rem;
    font-size: 1.2rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 10px 10px 5px #656565;
    transition-property: top, box-shadow, transform;
    transition-duration: 0.2s, 0.2s, 1s;
}
.btn4:hover {
    top: 0px;
    box-shadow: 5px 5px 5px 0px #656565;
}
.btn4:active {
    transform: rotateX(360deg);
    transition-property: none;
}

Reproduisez le bouton ci-dessous utilisant uniquement un lien html <a> et en respectant les effets de transition. Vous n’avez pas besoin de rajouter quoi que soit en plus de l’élément <a> dans votre code html.

.btn5 {
    position: relative;
    padding: 0 1rem;
    text-align: center;
    box-sizing: border-box;
    font-size: 1.25rem;
    line-height: 2.5rem;
    text-decoration: none;
    color: #6709c6;
    font-weight: bold;
    text-transform: uppercase;
}
.btn5::before, 
.btn5::after {
    position: absolute;
    display: block;
    content: "";
    width: 0;
    border-top: 3px solid #6709c6;
    transition-duration: 0.5s;
}
.btn5::before {
    top: -3px;
    left: 0px;
}
.btn5::after {
    bottom: -3px;
    right: 0px;
}
.btn5:hover {
    color: #000;
}
.btn5:hover::before, 
.btn5:hover::after {
    width: 100%;
}
.btn5:active {
    color: #d408d6;
}
.btn5:active::before, 
.btn5:active::after {
    border-color: #d408d6;
}

Correction de l’exercice

La solution proposée utilise le langage SCSS. Pour voir le code CSS correspondant, veuillez cliquer sur le bouton View Compiled en bas à droite.

Consultez ce code créé par crego (@crego) sur le site CodePen.

Sauf mention contraire*, l'article Transitions CSS : Boutons [CSS18] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.