Bouton CSS Tutorial Set
Règles générales
Tout d'abord, nous allons mettre en place nos règles de bouton général (avec une classe de .btn). Nous voulons que tous nos boutons pour avoir un fond de couleur, ce qui signifie le texte intérieur sera blanc. Le bouton doit avoir son texte agréable et centré, avec quelques coins arrondis, un moment fort agréable, et en haut une hauteur par défaut.
Si vous voulez la compatibilité « complète », pensez à ajouter des préfixes de navigateur pour border-radius et box-shadow. mais pour des raisons de simplicité, je les ai laissé ici. La boîte-ombre utilise un très subtil, la valeur d'épaisseur 1 pixel dans un blanc semi-transparent, en utilisant une valeur de rgba.
il ressemblerait à quelque chose comme:
Jusqu'ici tout va bien. Cependant, nous ne voulons pas un bouton CSS réglé pour être si simple, nous voulons un peu de couleur! Donc, nous allons faire quelques plus de classes dans notre CSS:
Vous voulez différentes tailles? Pas de problème, il suffit sont des classes supplémentaires pour ajuster la hauteur de notre jeu de boutons et padding:
Et avec cela, vous pouvez mélanger et assortir vos couleurs avec des tailles!
Dernier point, mais non le moindre, ce serait une bonne idée d'avoir un vol stationnaire (souris au-dessus) et les états actifs (souris vers le bas). Vous pouvez le faire par couleur si vous en avez envie, mais nous adopter une approche plus simple en utilisant une ombre supplémentaire comme un « gradient faux » dans l'ensemble de l'ensemble bouton (qui aussi nous enregistrons différentes lignes de CSS).
Vous remarquerez que nous avons ajouté une deuxième valeur (séparés par une virgule) à notre ombre originale, mais cette fois-ci d'appliquer une plus grande ombre, une lumière et un noir pour chaque état. Avec cela, votre bouton de réglage est prêt pour l'action! Pour jouer avec un exemple en direct de ce bouton CSS tutoriel, vous pouvez le vérifier ici.
Russell Taylor est un ingénieur en informatique et Internet aficionado. Il a travaillé dans l'industrie de conception / développement web depuis plus de 10 ans maintenant et jouit de la liberté d'un travail en dehors du bureau.