Comment personnaliser le bouton d'entrée

Touches d'entrée permettent le plus souvent un visiteur de site Web pour présenter le contenu d'un formulaire - quelque chose d'une boîte de simple contact d'une demande d'emploi en ligne. Utilisation des feuilles de style en cascade et une connaissance de base du langage HTML, vous pouvez personnaliser ces boutons pour apparaître comme vous le voulez.


Sommaire

Instructions

  1. Ouvrez le fichier de code source de votre formulaire dans Notepad ou un autre éditeur de texte ou HTML.

  2. Créer une feuille de style en tapant le texte suivant dans le section du fichier directement sous la ligne:

  3. Dites à votre feuille de style que vous allez être la création d'un style pour le bouton avec la classe "mon-bouton" par l'insertion, dans la suite entre les deux

    input.my bouton {}

    Pour que cela fonctionne exactement, vous avez eu à déclarer la "mon-bouton" classe à l'intérieur sur le bouton soumettre. Vous pouvez utiliser un nom de classe que vous veux- "mon-bouton" est juste un exemple.

  4. Personnalisez votre bouton d'entrée en déclarant les règles à l'intérieur des accolades, se terminant chaque règle avec un point-virgule. Pour commencer, changer la largeur et la hauteur du bouton en utilisant le "largeur" et "hauteur" les attributs:

    input.my bouton {
    largeur: 200px;
    hauteur: 100px;
    }

  5. Changez la couleur du bouton en utilisant le "Couleur de fond" attribut, et la couleur du texte avec le "couleur" attribut:

    background-color: noir
    couleur: jaune;

  6. Changer la frontière du bouton avec le "frontière" attribuer. A l'intérieur de la frontière attribuer vous pouvez déclarer la largeur de la bordure en pixels, de type - pointillé, pointillés, etc. --et couleur:

    border: 4px pointillé jaune;

  7. Changer le look de la police à l'aide des attributs tels que la "taille de police," "text-transform," et "famille de polices" les attributs:

    font-size: 30px;
    font-family: Trebuchet MS
    text-transform: uppercase;

  8. Utiliser une image d'arrière-plan avec le "image de fond" attribuer. Enregistrez l'image sur votre bureau comme button.jpg. Débarrassez-vous de la "Couleur de fond" la valeur et ensemble "frontière" à 0 au sein de votre fichier de code source:

    background-image: url ('button.jpg') -
    border: 0;




Conseils & Avertissements

  • Trouver plus de feuille de style attribue à utiliser pour personnaliser vos boutons d'entrée en regardant sur la liste de référence de CSS de Mozilla Developer Network (voir Ressources).
» » » » Comment personnaliser le bouton d'entrée