Comment créer cette effet en CSS/HTML ?

Résolu
Utilisateur anonyme -  
Bonjour,

j'aimerais savoir comment coder et créer ce style de boutons comme sur ce site ( en haut en vert)

https://ui-studio.fr/

voila, quand on passe la souris sur le boutons, un dégradé vert arrive doucement, puis s'en va si l'on enleve la souris

comment créer ceci ?

d'avance merci
Configuration: Mac OS X
Safari 531.9

7 réponses

  • Votes
  • Date
  • Date décroissante
  2. Utilisateur anonyme
    est en javascript on fait comment ? y aurait il un tuto pour cette méthode ?

    merci

    merci
    2. Coronier
      Salut,

      Tu peux aussi le faire en HTML/CSS

      que tu mettes une image de fond sur l'onglet:

      CSS:
      onglet
      {
      background-image: url("ton image d'onglet.png")
      }

      et un hover avec une image GIF dynamique qui crée un dégradé (ou l'effet que tu veux, par exemple un remplissage progressif)

      CSS:
      onglet:hover
      {
      background-image: url("ton image d'onglet.gif")
      }
      1. avion-f16
        Oui mais il n'y a pas l'effet de transition : le changement est direct.
      2. Coronier
        @avion-f16Non, tu fais une GIF animée.

        Par exemple:
        - image 1 normale: bleue
        - image 2 temps0 : 100% bleu
        temps 1 : 20%vert 80% bleu
        t2: 40-60
        t3:60-40
        .... t5: 100%vert, pas de répétition.

        Avec le GIMP c'est facile à faire, tu fais des calques sur une image que tu superposes, puis tu exportes en .GIF
      3. avion-f16
        @CoronierSeulement 5 temps, ça fait peux !
        Il en faudrai au moins 8 par seconde.
      4. Coronier
        @avion-f16Oui, j'avais la flemme de tout marquer :)
        Plus il y en a, mieux c'est. Disons que c'est utile quand tu ne veux pas mettre de Flash mais que tu veux des effets proches. Pour les onglets monochrome, javascript reste suffisant.
      5. avion-f16
        @CoronierPas besoin de Flash pour ce genre d'effet : Javascript suffit !
        Flash n'est a utilisé que lorsque c'est impossible à faire en Javascript (pour des intros notamment).
        Par contre, les .gif n'ont pas une aussi bonne qualité que les .png : 256 couleurs si je ne me trompe pas → pour un bouton contenant un dégradé, ça ne le fait pas d'trop.