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.

Aperçu du premier bouton
Afficher la solution HTML

Solution HTML :

<a class="btn1" href="#">Bouton</a>
Afficher la solution CSS

Solution CSS :

.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.

Aperçu du bouton 2
Afficher la solution HTML

Solution HTML :

<a class="btn btn1" href="#">Bouton</a>
<a class="btn btn2" href="#">Bouton</a>
Afficher la solution CSS

Solution CSS :

.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.

Aperçu du bouton 3
Afficher la solution HTML

Solution HTML :

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

Solution CSS :

.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 clique.

Aperç du bouton 4
Afficher la solution CSS

Solution CSS :

.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.

Afficher la solution CSS

Solution CSS :

.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

Afficher la solution

Solution :

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

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

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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.