Miten luoda: Tekstialusta

Miten asettaa tekstialustyyli

Vaihe 1 - Lisää HTML:

<button class="btn success">Onnistuminen</button>
<button class="btn info">Tieto</button>
<button class="btn warning">Varoitus</button>
<button class="btn danger">Vaara</button>
<button class="btn default">Oletus</button>

Toinen vaihe - Lisää CSS:

Jotta "tekstipainikkeen" ulkoasu olisi mahdollisimman lähellä, poistimme oletusarvoisen taustavärin ja reunan:

.btn {
  reuna: ei;
  väliväri: perimä;
  täyttö: 14px 28px;
  fonttikoko: 16px;
  kursori: sormi;
  näyttö: sisäsyöttö;
{}
/* Kun hiiren osoitin on päällä */
.btn:hover {tausta: #eee;}
.success {väri: vihreä;}
.info {väri: sinivihreä;}
.warning {väri: keltainen;}
.danger {väri: punainen;}
.default {väri: musta;}

Kokeile itse

Tekstipainikkeet, joilla on erillinen tausta

Tekstipainikkeet, joilla on erityinen taustaväri hiiren osoitettu ollessa päällä:

.btn {
    reuna: ei;
    väliväri: perimä;
    täyttö: 14px 28px;
    fonttikoko: 16px;
    kursori: sormi;
    näyttö: sisäsyöttö;
{}
/* vihreä */
.success {
    väri: vihreä;
{}
.success:hover {
    väliväri: #04AA6D;
    väri: valkoinen;
{}
/* sinivihreä */
.info {
    väri: sinivihreä;
{}
.info:hover {
    tausta: #2196F3;
    väri: valkoinen;
{}
/* keltainen */
.warning {
    väri: keltainen;
{}
.warning:hover {
    tausta: #ff9800;
    väri: valkoinen;
{}
/* punainen */
.danger {
    väri: punainen;
{}
.danger:hover {
    tausta: #f44336;
    väri: valkoinen;
{}
/* harmaa */
.default {
    väri: musta;
{}
.default:hover {
    background: #e7e7e7;
{}

Kokeile itse

Liittyvät sivut

Oppitunti:CSS-painike