CSS -knoppies
Leer hoe om knoppies te styl met CSS.
Basiese knoppiestilering
Voorbeeld
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Knoppie kleure
Gebruik die background-coloreiendom om die agtergrondkleur van 'n knoppie te verander:
Voorbeeld
.button1 {background-color: #4CAF50;} /* Green */
.button2
{background-color: #008CBA;} /* Blue */
.button3 {background-color:
#f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5
{background-color: #555555;} /* Black */
Knoppie Groottes
Gebruik die font-sizeeiendom om die lettergrootte van 'n knoppie te verander:
Voorbeeld
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3
{font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Gebruik die paddingeiendom om die opvulling van 'n knoppie te verander:
Voorbeeld
.button1 {padding: 10px
24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
Geronde knoppies
Gebruik die border-radiuseiendom om afgeronde hoeke by 'n knoppie te voeg:
Voorbeeld
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3
{border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
Gekleurde knooprande
Gebruik die bordereiendom om 'n gekleurde rand by 'n knoppie te voeg:
Voorbeeld
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
...
Beweegbare knoppies
Gebruik die :hoverkieser om die styl van 'n knoppie te verander wanneer jy die muis daaroor beweeg.
Wenk: Gebruik die transition-durationeienskap om die spoed van die "sweef"-effek te bepaal:
Voorbeeld
.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
Skadu-knoppies
Gebruik die box-shadoweiendom om skaduwees by 'n knoppie te voeg:
Voorbeeld
.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);
}
Gedeaktiveerde knoppies
Gebruik die opacityeiendom om deursigtigheid by 'n knoppie te voeg (skep 'n "gestremde" voorkoms).
Wenk: Jy kan ook die cursoreiendom byvoeg met 'n waarde van "nie-toegelaat", wat 'n "geen parkering-teken" sal vertoon wanneer jy oor die knoppie beweeg:
Voorbeeld
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
Knoppie Breedte
By verstek word die grootte van die knoppie bepaal deur die teksinhoud daarvan (so wyd soos die inhoud daarvan). Gebruik die widtheiendom om die breedte van 'n knoppie te verander:
Voorbeeld
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width:
100%;}
Knoppie Groepe
Verwyder kantlyne en voeg float:leftby elke knoppie om 'n knoppiegroep te skep:
Voorbeeld
.button {
float: left;
}
Begrensde knoppiegroep
Gebruik die bordereiendom om 'n omringde knoppiegroep te skep:
Voorbeeld
.button {
float: left;
border: 1px
solid green;
}
Vertikale knoppiegroep
Gebruik display:blockin plaas van float:leftom die knoppies onder mekaar te groepeer, in plaas van langs mekaar:
Voorbeeld
.button {
display: block;
}
Knoppie op Beeld
Geanimeerde knoppies
Voorbeeld
Voeg 'n pyltjie by terwyl jy beweeg:
Voorbeeld
Voeg 'n "gedrukte" effek by klik:
Voorbeeld
Toon in as jy beweeg:
Voorbeeld
Voeg 'n "rimpel" effek by klik: