Effet du bouton coulissant de la recréation de Netlify

Le bouton de téléchargement sur le site officiel de Netlify est simple et élégant, attirant l'œil sans être brusque, et son effet interactif est particulièrement impressionnant: lorsque la souris plane, le bouton se développe et affiche les mots "télécharger". J'ai remarqué une légère différence d'affichage sous Safari, ce qui a suscité mon intérêt à explorer comment il a été mis en œuvre. J'ai donc essayé de reproduire l'effet et d'optimiser l'espacement.

Sa technologie principale réside dans quatre aspects:

• Utilisez l'attribut left pour contrôler l'affichage et la cachette de la balise "Télécharger".
• Utilisez la propriété padding dans l'état de survol du bouton pour faire de la place pour la balise "Télécharger".
• Déclarer scale(1, 1) lorsque le bouton est plané, garantissant que le contenu reste intact pendant le déplacement.
• Utilisez l'attribut transition pour animer padding , d'arrière-plan background-position position et transform du bouton pour obtenir des effets d'animation lisses.

Voici un exemple de code qui n'inclut pas les styles pour montrer son principe plus clairement:

S'il est difficile de comprendre comment cela fonctionne, l'image suivante montre comment la balise "Download" est cachée du bouton via overflow: hidden , et comment il peut être mis en vue lorsque la souris plane.

Masquez-le en définissant une valeur left négative pour l'icône et l'étiquette "Télécharger", et réinitialisez-la à une valeur positive lorsque le bouton entier est en train de planer.

 / * Statut par défaut * /
.bouton {
    arrière-plan: 
      # F6BC00 
      URL (données: image / svg xml; base64, ...)
      NO-REPAT -12PX CENTRE;
    débordement: caché;
}

.Button Span: Nth-Child (1) {
  Position: absolue;
  gauche: -70px;
}

/ * Statut de volant * /
.Button: Hover {
  padding-gauche: 95px;
  Position d'arrière-plan: Centre 5px;
}

.Button Span: Nth-Child (1) {
  Position: absolue;
  gauche: -70px;
}

Il convient de noter que dans cet état seul, l'icône glissera en vue et laissera suffisamment d'espace pour la balise "Télécharger", mais la balise flottera à l'extérieur du bouton lors de la volonté.

À l'heure actuelle, l'ajout scale(1, 1) au bouton peut garder le contenu complet.

 / * Statut de volant * /
.Button: Hover {
  padding-gauche: 95px;
  Position d'arrière-plan: Centre 5px;
  transformée: échelle (1, 1);
}

padding est une valeur d'expérience et changera en fonction de facteurs tels que la police, la taille de la police, etc.

Enfin, transition lisse la transition d'animation et améliore l'expérience utilisateur.

 / * Statut par défaut * /
.bouton {
    arrière-plan: 
      # F6BC00 
      URL (données: image / svg xml; base64, ...)
      NO-REPAT -12PX CENTRE;
    débordement: caché;
    Transition: rembourrage .2s facilité, position de fond .2s facilité, transform .5s facilité;
}

Ajoutez des modifications détaillées, telles que les coins arrondis, et vous obtiendrez un beau bouton.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!