Partagez plusieurs façons de créer des boutons CSS, avec le code de style de bouton CSS joint

Dans le projet, presque tous les sites Web utiliseront des boutons, allant d'une douzaine à quelques-uns. Un bouton pratique et esthétique peut ajouter beaucoup de couleur à la page, attirant ainsi l'attention de l'utilisateur. Cet article parle principalement des différentes méthodes d'écriture des boutons CSS et de l'embellissement des boutons CSS. Enfin, un code de style de bouton CSS commun sera affiché à titre de référence. D'accord, continuez à lire !

1. Différentes façons d'écrire des boutons CSS

Les boutons CSS peuvent être écrits directement avec un bouton, avec une balise ou avec une entrée, bien sûr en utilisant des divs. Vous pouvez utiliser différents styles pour définir les styles souhaités en fonction des caractéristiques de chaque balise. Par exemple : si vous écrivez un bouton avec la balise a, vous utiliserez certainement l'attribut text-decoration : none. Si vous utilisez bouton pour l'écrire magnifiquement, vous pouvez utiliser l'attribut border : none, etc.

1. Bouton Bouton (pas de style)

<button>默认按钮</button>

2. Lien hypertexte vers un bouton d'étiquette

<a href="#" class="button">链接按钮</a>

Partie CSS :

.button {
       background-color: #4CAF50;
       color: white;
       padding: 15px 32px;
       text-align: center;
       text-decoration: none;
       display: inline-block;
       font-size: 16px;
   }

3. Bouton Bouton (y compris le style)

<button class="button">按钮</button>

Partie CSS :

.button {
       background-color: #4CAF50;
       border: none;
       color: white;
       padding: 15px 32px;
       text-align: center;
       font-size: 16px;
       cursor: pointer;
   }

4. Bouton de la zone de saisie

<input type="button" class="button" value="输入框按钮">

Partie CSS :

.button {
       background-color: #4CAF50;
       border: none;
       color: white;
       padding: 15px 32px;
       text-align: center;
       font-size: 16px;
       cursor: pointer;
   }

Rendu :

2. Codes de style de bouton CSS courants

Créez un bouton en métal très texturé, quand l'utilisateur clique sur ce bouton, l'effet affiché à droite apparaîtra, la couleur d'arrière-plan devient plus sombre et l'ombre autour du bouton devient une ombre intérieure.

.div {
  display: inline-block;
  padding: .3em .5em;
  background-image: linear-gradient(#ddd, #bbb);
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: .3em;
  box-shadow: 0 1px white inset;
  text-align: center;
  text-shadow: 0 1px 1px black;
  color: white;
  font-weight: bold;
 }
 .div:active {
  box-shadow: .05em .1em .2em rgba(0, 0, 0, .6) inset;
  border-color: rgba(0, 0, 0, .3);
  background: #bbb;
 }

Affichage d'images :

Ce qui précède présente les méthodes pour créer des boutons et comment les rendre beaux . , quel style pouvez-vous définir, et enfin, un exemple est donné à titre de référence pour les apprenants !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!