CSS - Icône de téléchargement animée

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, Create a animated download icon in CSS.

Lorsque vous faites un appel à une action sur une page Web, vous voulez normalement que les visiteurs se dirigent vers le bas pour s'inscrire à votre newsletter ou télécharger une partie de votre contenu. C'est l'appel à ces actions que vous devriez essayer de faire ressortir afin que les gens puissent se concentrer sur les endroits de votre site Internet.

Dans ce tutoriel, nous allons créer une icône de téléchargement CSS animée :

Visitez la page de démo pour voir l'animation :

Demo

D'abord, nous commençons par créer le code HTML pour l'icône de téléchargement. Nous allons avoir besoin d'un lien, et à l'intérieur de cet espace, d'une zone pour l'icône de téléchargement.

<a href="http://www.example.com/download-content.html" class="download-icon">
    <span></span>
    Download
</a>

Pour commencer, nous stylons le texte au bas de l'icône. Ce texte est utilisé pour expliquer ce que cet appel action sera.

a.download-icon
{
    color: #333;
    font-size: 1.3rem;
    font-weight: bold;
    text-decoration: none;
}

Ensuite, nous pouvons styliser l'icône en modifiant la balise « span » pour créer une boîte rectangulaire utilisant les propriétés « width » et « height », puis nous ajoutons une bordure à cet élément. En plaçant un « border-top » à transparent, cela va masquer la bordure supérieure de la vue, créant le style visuel de la boîte de téléchargement.

.download-icon span
{
    display: block;
    cursor: pointer;
    position: relative;
    width: 60px;
    height: 30px;
    margin: auto;
    border: 10px solid #333;
    border-top: transparent;
}

Pour créer la flèche sur l'icône de téléchargement, nous devons utiliser les sélecteurs CSS(1) pour créer un nouvel élément à l'aide de « :before » et « :after ». Ceux-ci devront être positionnés en absolu afin que nous puissions régler la position exacte de la flèche.

.download-icon span:before,
.download-icon span:after
{
    content: '';
    display: block;
    position: absolute;
}

Sur l'événement survol de « download-icon », nous allons créer la flèche et ajouter une animation d'un effet de rebond. Utilisez la propriété « animation » pour définir l'animation de rebond, ajoutez la durée de l'animation souhaitée et définissez l'animation en boucle infinie.

Sur l'élément « before », nous allons créer la ligne de la flèche ; commencez par vous positionner sur l'icône et créez la ligne en utilisant les propriétés « width » et « height » suivies d'une couleur de fond.

Sur l'élément « after », nous pouvons alors créer un triangle en utilisant une astuce en CSS en créant une bordure et en réglant celle de gauche et de droite à « transparent ».

a.download-icon:hover span:before,
a.download-icon:hover span:after
{
    animation: bounce .5s infinite alternate;
    -webkit-animation: bounce .5s infinite alternate;
}

a.download-icon:hover span:before{
    left: 15px;
    top: -9px;
    width: 10px;
    height: 10px;
    background: #333;
}
a.download-icon:hover span:after
{
    left: 10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #333;
}

Enfin, nous créons l'animation de rebond. Pour ce faire, nous avons juste besoin de changer la position de l'élément de quelques pixels. Pour cela, nous utilisons la propriété « transform » pour modifier la position « translateY » à -10px. Cela va déplacer l'élément de 10 pixels vers le haut ; à la fin de l'animation, nous devrons changer le positionnement à 0 pixel.

@keyframes bounce {
  from {
    transform: translateY(-10px);
  }

  to {
    transform: translateY(0);
  }
}

@-webkit-keyframes bounce {
  from {
    -webkit-transform: translateY(-10px);
  }

  to {
    -webkit-transform: translateY(0);
  }
}

Demo

Nous avons vu, dans ce tutoriel, comment créer simplement une icône de téléchargement animée. N'hésitez pas à faire d'autres icônes animées et à les partager !

Vous pouvez consulter la démonstration pour avoir un aperçu du rendu dans un navigateur.

N'hésitez pas à consulter nos autres tutoriels CSS pour améliorer le visuel de vos sites !

Cet article a été originellement publié par Paul Underwood sur le site officiel de Paulund.

Merci à FirePrawn pour sa relecture lors de la traduction et à milkoseck pour sa relecture orthographique. Merci aussi à jacques_jean pour ses propositions orthographiques supplémentaires.