• [Tuto] Changer l'apparence des boutons

    Hey!

    Nous nous retrouvons pour un nouveau tuto en codage. Je vous rappelle que si vous avez besoin d'un code qui se trouve pas sur le blog c'est sur le  forum

    Je voulais aussi dire que je posterai plusieurs tutos en codage pendant les vacances. Revenons à nos moutons.

    Eklablog est une très bonne plateforme où les changements on les voit en direct sur notre blog. Mais comme toutes les plateformes elle nous offre jamais assez de possibilités. On peut changer l'apparence des boutons mais pas modifier leur apparence au survol! Alors voilà l'explication pour...

    Changer l'apparence des boutons

    Je vous passe quand même le code pour l'apparence de base du bouton.

    L'apparence de base du bouton

    Voici le code:

    input[type=button],input[type=submit]button {
        background-color:COULEUR;;
        color:COULEUR;
        font-family:"NOM DE LA POLICE";
        border: NOMBREpx solid COULEUR;;
        border-radius:NOMBREpx
        font-size: NOMBREpx;
        letter-spacing: NOMBREpx;
    }

     background-color:   fond du bouton

      color: couleur de la police

    font-family: nom de la police(extérieure ou pas à eklablog)

    border: couleur et grosseur de la bordure

     border-radius: Coins Arrondis du bouton

      font-size:  taille de la police

    letter-spacing: espacement des lettres

     

    Transition entre l'apparence de base et l'apparence survolée.

    Je vous explique: vous pouvez rajouter une durée pour la transformation du bouton (ce code est à ajouter au code ci-dessus)

     

    -webkit-transitionall NOMBRE*ease
        -moz-transitionall NOMBREease;
        -o-transitionall
     NOMBREs ease;}

    * NOMBRE: Mettre le meme nombre pour les trois lignes. Pour mettre par exemple 5s de transition mettre 0.5.

     

    L'apparence du bouton lors du survol

     

    input[type=button]:hoverinput[type=submit]:hoverinput[type=reset]:hoverbutton:hover.button:hover 
    { background-color: COULEUR;
        color:COULEUR;
        font-family:"NOM DE LA POLICE";
    letter-spacing:NOMBREpx;
        border: 1px solid COULEUR;
    border-radius:NOMBREpx;}

     background-color:couleur du fond du bouton

     color couleur du texte

    font-family nom de la police (extérieure ou pas à eklablog)

    letter-spacing espacement entre chaque lettre

    border bordure du bouton

    border-radius arrondis du bouton

     

    Voilà la fin du tuto.

    J'espère que j'ai bien expliquée et que ça vous servira.

    Un autre tutu arrivera bientôt.

    Ella


  • Commentaires

    1
    Mercredi 11 Juillet à 08:09

    cool ! merci beaucoup !

    2
    Mercredi 11 Juillet à 08:36

    Avec plaisir, ça m'arrive souvent que des gens me demandent comment changer les boutons.

    3
    Mercredi 11 Juillet à 08:49

    Ah bah maintenant ils seront contents

     

    4
    Mercredi 18 Juillet à 00:04

    merci bien pour ton tuto, ahah!

    a vrai dire, j'ai vraiment cru que tu parlais de boutons d'acnés (honte à moi, hihi)

    cependant j'aimerais savoir si c'est tous les boutons comme envoyer?

     

     

    en fait je crois que j'ai un problème peu commun: au survol des champs d'écriture le cadre change de forme (agrandissement) et je ne me souviens plus de ce que j'ai fait pour modifier ça. j'ai beau chercher.. peut-être un code CSS dont je ne me souviens même plus duquel.

    si jamais tu aurais la solution, fais-moi signe!

     

    bisoux, Brilleuse

    5
    Mercredi 18 Juillet à 12:31

    Avec  plaisir!

    Ah mince tu t'es trompée ça arrive. Moi je sais pas comment faire pour l'acné j'en ai pas mais une de mes copines à tellement d'acné qu'elle doit prendre un traitement.

     

    J'aimerai bien t'aider mais j'ai pas trop compris le souci.

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :