Hoe te maken: tekstknop

Hoe stijl van tekstknop instellen

Stap 1 - Voeg HTML toe:

<button class="btn success">Succes</button>
<button class="btn info">Informatie</button>
<button class="btn warning">Waarschuwing</button>
<button class="btn danger">Gevaar</button>
<button class="btn default">Standaard</button>

Stap 2 - Voeg CSS toe:

Om het uiterlijk van de 'tekstknop' te verkrijgen, hebben we de standaard achtergrondkleur en rand verwijderd:

.btn {
  rand: geen;
  achtergrond-kleur: geërfd;
  padding: 14px 28px;
  lettergrootte: 16px;
  cursor: wijzer;
  weergave: inline-blok;
{}
/* Bij muisovergang */
.btn:hover {achtergrond: #eee;}
.success {kleur: groen;}
.info {kleur: dodgerblauw;}
.warning {kleur: oranje;}
.danger {kleur: rood;}
.default {kleur: zwart;}

Try it yourself

Tekstknoppen met aparte achtergrondkleur

Tekstknoppen met specifieke achtergrondkleur bij muisovergang:

.btn {
    rand: geen;
    achtergrond-kleur: geërfd;
    padding: 14px 28px;
    lettergrootte: 16px;
    cursor: wijzer;
    weergave: inline-blok;
{}
/* Groen */
.success {
    kleur: groen;
{}
.success:hover {
    achtergrond-kleur: #04AA6D;
    kleur: wit;
{}
/* Blauw */
.info {
    kleur: dodgerblauw;
{}
.info:hover {
    achtergrond: #2196F3;
    kleur: wit;
{}
/* Oranje */
.warning {
    kleur: oranje;
{}
.warning:hover {
    achtergrond: #ff9800;
    kleur: wit;
{}
/* Rood */
.danger {
    kleur: rood;
{}
.danger:hover {
    achtergrond: #f44336;
    kleur: wit;
{}
/* Grijs */
.default {
    kleur: zwart;
{}
.default:hover {
    background: #e7e7e7;
{}

Try it yourself

Related pages

Tutorial:CSS button