Handpuzzles.com


Comment faire un bouton en CSS

Comment faire un bouton en CSS

Les boutons sur vos pages web, lorsqu'il est laissé sans style, sont susceptibles d'apparaître différent dans chaque navigateur. Vous pouvez améliorer vos conceptions de Web en utilisant la feuille de style en cascade (CSS) code pour correspondre boutons pour le reste de votre site. Les deux étiquettes de boutons-création - et - peut prendre ne importe quelle propriété CSS vous pouvez utiliser sur la plupart des autres éléments HTML, tels que les paragraphes et

boîtes. Astuces les plus avancés en CSS niveau 3 (CSS3), comme des antécédents de gradient et les ombres portées, vous permettent de créer des boutons sans ouvrir un programme d'édition graphique.

Instructions


•  Ecrire le code HTML pour faire un bouton apparaîtra sur votre page Web. Vous pouvez utiliser le bouton <> ou la balise <input>, mais la balise <input> est mieux si vous ajoutez des boutons aux formes. La balise de bouton ressemble à ceci: <touche> Bouton texte </ button> Mettez le texte que vous souhaitez afficher sur le bouton entre les balises <button>. Ce est différent de la balise <input>, qui vous oblige à définir le <type> attribut de «soumettre» et la «valeur» attribut pour le texte que vous voulez sur le bouton. Voici un <input> exemple: <input type = "submit" value = "Cliquez ici!" />

•  Ouvrez la feuille de style pour votre site Web dans votre éditeur de code. Ajouter balises <style> et écrivez votre code CSS entre eux si vous ne avez pas une feuille de style ou de savoir comment en créer un. Écrire un sélecteur CSS à la touche <> ou <input> comme tant ", sélectionnez": touche {} écrire un "attribut" sélecteur pour <input> au lieu de sélectionner par la balise <input> elle-même, parce que votre forme inclura <input> balises pour les champs de texte ainsi. Voici le "attribut" selector: entrée [type = "submit"] {}

•  Utilisez le code CSS pour coiffer le bouton que vous le souhaitez. Régler le fond sur une nouvelle couleur, image ou même un gradient. Retirer la frontière par défaut et changer pour quelque chose que vous préférez, comme une frontière arrondie, en utilisant "border-radius." Réglez le "box-shadow" propriété pour ajouter une ombre portée. Voici un exemple: bouton {background: # FF0000; couleur: #ffffff; border: 0px; border-radius: 10px; } Le code ci-dessus crée un bouton rouge avec du texte blanc, pas de frontière et les coins ronds.




        

Publish my comment