CSS painikkeet
- Edellinen sivu CSS peittimet
- Seuraava sivu CSS sivutus
Opi, miten CSS:ää käytetään painikkeen tyylittelyyn.
Peruspainikeyleikki
Esimerkki
.button {
background-color: #4CAF50; /* Vihreä */
raja: ei;
color: white;
täyttö: 15px 32px;
tekstiasento: keskellä;
tekstiväline: ei-muotoiltu;
näyttö: sisäsyötteenä;
fonttikoko: 16px;
}
Painikkeen väri
Käytä taustaväri Ominaisuus muuttaa painikkeen taustaväriä:
Esimerkki
.button1 {taustaväri: #4CAF50;} /* Vihreä */
.button2 {taustaväri: #008CBA;} /* Sininen */
.button3 {taustaväri: #f44336;} /* Punainen */
.button4 {taustaväri: #e7e7e7; väri: musta;} /* Harmaa */
.button5 {taustaväri: #555555;} /* Musta */
Painikkeen koko
Käytä fonttikoko Ominaisuus muuttaa painikkeen fonttikokoa:
Esimerkki
.button1 {fonttikoko: 10px;}
.button2 {fonttikoko: 12px;}
.button3 {fonttikoko: 16px;}
.button4 {fonttikoko: 20px;}
.button5 {fonttikoko: 24px;}
Käytä täyttö Ominaisuus muuttaa painikkeen sisätilaa:
Esimerkki
.button1 { täyttö: 10px 24px;}
.button2 { täyttö: 12px 28px;}
.button3 { täyttö: 14px 40px;}
.button4 { täyttö: 32px 16px;}
.button5 { täyttö: 16px;}
Pyöreät kulmien painikkeet
Käytä rullauskulma Ominaisuus lisää pyöreät kulmat painikkeelle:
Esimerkki
.button1 {rullauskulma: 2px;}
.button2 {rullauskulma: 4px;}
.button3 {rullauskulma: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
Värikäs painikkeen reuna
Käytä border Ominaisuudella lisää painikkeeseen värikäisen reunan:
Esimerkki
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Vihreä */
}
...
Hiiren oltua päällä oleva painike
Kun hiiri siirtyy painikkeen päälle, käytä :hover Valitsin voi muuttaa painikkeen tyyliä.
Vinkki：Käytä transition-duration Ominaisuudella määritetään "hiiren oltua päällä"-tehosteen nopeus：
Esimerkki
.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Vihreä */
color: white;
}
...
Varjovalo
Käytä box-shadow Ominaisuudella lisää painikkeeseen varjostusta：
Esimerkki
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
Poissa käytöstä oleva painike
Käytä opacity Ominaisuudella lisää painikkeeseen läpinäkyvyyttä (luodaan "poissa käytöstä"-ulkoasu).
Vinkki：Voit myös lisätä "ei sallittu"-arvon sisältävän cursor Ominaisuudella näyttää "ei pysäköintiä"-merkin (kielletty pysäköinti) kun hiiriä siirretään painikkeen päälle：
Esimerkki
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
Painikkeen leveys
Oletusarvoisesti painikkeen koko riippuu sen tekstillä (saman leveydellä kuin sisällön). Käytä width Muuta painikkeen leveyttä seuraavilla ominaisuuksilla：
Esimerkki
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
Painikkeiden ryhmittely
Poista ulkoreunus ja lisää jokaiseen painikkeeseen float:left，luodaksesi painikkeiden ryhmät:
Esimerkki
.button {
float: left;
}
Reunustetut painikkeiden ryhmät
Käytä border ominaisuus luodaksesi reunustetut painikkeiden ryhmät:
Esimerkki
.button {
float: left;
border: 1px solid green;
}
Pystysuuntainen painikkeiden ryhmä
Käytä display:block Korvaa float:left Jaa painikkeet ylös-alaspäin, ei rinnakkain:
Esimerkki
.button {
display: block;
}
Animaatiopainike
Esimerkki 1
Lisää nuoli hiiren osoittimen yllä:
Esimerkki 2
Lisää klikkaushetken 'näppäin painettu' efekti:
Esimerkki 3
Pehmeä sytytys hiiren osoittimen yllä:
Esimerkki 4
Lisää klikkaushetken 'aallot' efekti:
- Edellinen sivu CSS peittimet
- Seuraava sivu CSS sivutus
