Comment créer : bouton de texte

Comment définir le style des boutons de texte

Étape 1 - Ajouter HTML :

<button class="btn success">Success</button>
<button class="btn info">Info</button>
<button class="btn warning">Warning</button>
<button class="btn danger">Danger</button>
<button class="btn default">Default</button>

Deuxième étape - Ajouter CSS :

Pour obtenir l'apparence du 'bouton de texte', nous avons supprimé la couleur de fond et la bordure par défaut :

.btn {
  bordure: none;
  couleur_fond: hérité;
  marge: 14px 28px;
  taille_police: 16px;
  curseur: pointeur;
  affichage: en-ligne-bloc;

/* Au survol de la souris */
.btn:hover {fond: #eee;}
.success {couleur: vert;}
.info {couleur: dodgerblue;}
.warning {couleur: orange;}
.danger {couleur: rouge;}
.default {couleur: noir;}

Essayez-le vous-même

Bouton de texte avec fond séparé

Bouton de texte avec couleur de fond spécifique au survol de la souris :

.btn {
    bordure: none;
    couleur_fond: hérité;
    marge: 14px 28px;
    taille_police: 16px;
    curseur: pointeur;
    affichage: en-ligne-bloc;

/* vert */
.success {
    couleur: vert;

.success:hover {
    couleur_fond: #04AA6D;
    couleur: blanc;

/* bleu */
.info {
    couleur: dodgerblue;

.info:hover {
    fond: #2196F3;
    couleur: blanc;

/* orange */
.warning {
    couleur: orange;

.warning:hover {
    fond: #ff9800;
    couleur: blanc;

/* rouge */
.danger {
    couleur: rouge;

.danger:hover {
    fond: #f44336;
    couleur: blanc;

/* gris */
.default {
    couleur: noir;

.default:hover {
    background: #e7e7e7;

Essayez-le vous-même

Pages liées

Tutoriel :Bouton CSS