Comment modifier un bouton via CSS

Dans le processus de conception Web, les boutons peuvent être considérés comme un élément essentiel. Les boutons jouent un rôle très important en tant que principal moyen permettant aux utilisateurs d’interagir avec le site Web. Cependant, vous pouvez rencontrer certains problèmes lors du processus de conception, tels que des boutons qui ne sont pas coordonnés avec le style général de la page Web ou des styles de boutons qui ne correspondent pas au thème du site Web. Afin de résoudre ces problèmes, vous pouvez modifier le style du bouton via CSS pour rendre le bouton plus cohérent avec le style du site Web et plus beau. Voyons comment modifier les boutons via CSS.

Styles de boutons de base

Lors du développement de pages Web, nous utilisons généralement la balise de bouton HTML pour ajouter des éléments de bouton et utilisons les styles CSS pour définir l'apparence du bouton. Lorsque le style n'est pas défini, le style par défaut du libellé du bouton est relativement simple et s'affiche généralement sous la forme d'un carré gris plein. Voici le style de bouton le plus basique :

Cliquez sur moi !

Utilisez les styles CSS pour embellir le bouton. Tout d’abord, vous pouvez définir la couleur d’arrière-plan, la bordure, la police et d’autres styles du bouton. Par exemple, définir la couleur d'arrière-plan du bouton sur bleu, la couleur de la police sur blanc et la bordure sur aucun peut être obtenu grâce aux styles CSS suivants :

button {
background-color: blue;
color: white;
border: none;
padding: 10px 20px;
}

De cette façon, le bouton deviendra un rectangle bleu avec du texte blanc dessus, ce qui sera plus beau.

Bouton à coin arrondi

Dans la conception Web, le bouton à coin arrondi est progressivement devenu un style de bouton populaire. Par rapport aux boutons rectangulaires traditionnels, les boutons arrondis sont plus doux et plus confortables à regarder. Si vous souhaitez transformer un bouton carré en bouton arrondi, vous pouvez utiliser la propriété border-radius dans les styles CSS pour y parvenir.

Par exemple, nous pouvons transformer le bouton en coins arrondis grâce au code suivant :

button {
background-color : bleu;
color: white;
border: none;
padding: 10px 20px;
border-radius : 5px;
}

L'attribut border-radius définit le rayon du coin du bouton, qui est défini ici comme 5 pixels. De cette façon, les quatre coins du bouton s’arrondissent et paraissent plus doux.

Boutons tridimensionnels

Dans certains cas, nous pouvons souhaiter que les boutons aient un aspect plus tridimensionnel et texturé. Ceci peut être réalisé en utilisant la propriété box-shadow dans les styles CSS.

Par exemple, le code suivant transforme le bouton en bouton avec un effet tridimensionnel :

button {
background-color: blue;
color: white;
border: none;
padding: 10px 20px;
border - radius: 5px;
box-shadow: 0px 5px 0px darkblue;
}

box-shadow attribut définit l'effet d'ombre du bouton L'ombre ici est une projection bleue vers le bas de 5 pixels, qui semble plus tridimensionnelle et. plus Il y a de la texture.

Bouton Transparent

Dans certaines situations où le contenu du texte doit être mis en évidence, nous pouvons souhaiter utiliser des boutons transparents pour obtenir un effet proéminent. Par exemple, nous pouvons utiliser un bouton transparent comme bouton de retour de la page, ce qui peut rendre le contenu du texte plus visible.

Le code suivant définit le bouton comme étant transparent :

button {
background-color: transparent;
color: blue;
border: none;
padding: 10px 20px;
}

De cette façon, le bouton devient Rendu transparent, la couleur du texte est bleue, ce qui le rend plus visible.

Résumé

La modification des boutons via CSS peut rendre le style du bouton plus cohérent avec le style de la page Web et plus beau. Nous pouvons utiliser la couleur d'arrière-plan, la bordure, la police, les coins arrondis, les propriétés tridimensionnelles et transparentes en CSS pour modifier le style du bouton. Dans les applications pratiques, nous devons choisir différents styles de boutons en fonction du thème du site Web et de l'expérience de la page pour rendre la conception Web plus remarquable.

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!