Come creare: pulsanti di testo

Come impostare lo stile dei pulsanti di testo

Passo 1 - Aggiungi 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>

Secondo passo - Aggiungi CSS:

Per ottenere l'aspetto del "pulsante di testo", abbiamo rimosso il colore di sfondo predefinito e i bordi:

.btn {
  bordo: none;
  colore_fondo: inherit;
  spaziatura: 14px 28px;
  dimensione_fonto: 16px;
  cursore: puntatore;
  display: inline-block;
}
/* Al mouse-over */
.btn:hover {sfondo: #eee;}
.success {colore: verde;}
.info {colore: azzurro scuro;}
.warning {colore: arancione;}
.danger {colore: rosso;}
.default {colore: nero;}

Prova personalmente

Pulsanti di testo con sfondo separato

Pulsanti di testo con sfondo colorato specifico al mouse-over:

.btn {
    bordo: none;
    colore_fondo: inherit;
    spaziatura: 14px 28px;
    dimensione_fonto: 16px;
    cursore: puntatore;
    display: inline-block;
}
/* Verde */
.success {
    colore: verde;
}
.success:hover {
    colore_fondo: #04AA6D;
    colore: bianco;
}
/* Blu */
.info {
    colore: azzurro scuro;
}
.info:hover {
    sfondo: #2196F3;
    colore: bianco;
}
/* Arancione */
.warning {
    colore: arancione;
}
.warning:hover {
    sfondo: #ff9800;
    colore: bianco;
}
/* Rosso */
.danger {
    colore: rosso;
}
.danger:hover {
    sfondo: #f44336;
    colore: bianco;
}
/* Grigio */
.default {
    colore: nero;
}
.default:hover {
    background: #e7e7e7;
}

Prova personalmente

Pagine correlate

Tutorial:Pulsante CSS