Przycisk CSS
W tej sekcji przedstawiamy użycie CSS do tworzenia przycisku.
Podstawowe Przycisk Style
Przykłady CSS
background-color: # 4CAF50; / * Zielony * /
border: none;
kolor: biały;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Spróbuj »
przycisk kolor
Możemy użyć background-color właściwość, aby ustawić kolor przycisku:
Przykłady CSS
.button2 {background-color: # 008CBA;} / * Niebieski * /
.button3 {background-color: # f44336;} / * Czerwony * /
.button4 {background-color: # e7e7e7; color: black;} / * szary * /
.button5 {background-color: # 555555;} / * Black * /
Spróbuj »
przycisk Rozmiar
Możemy użyć font-size właściwość, aby ustawić rozmiar przycisku:
Przykłady CSS
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Spróbuj »
przycisk zaokrąglone
Możemy użyć border-radius właściwość, aby ustawić przycisk zaokrąglenia:
Przykłady CSS
.button2 {border-radius: 4px;}
.button3 {border-radius: 8 pikseli;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
Spróbuj »
Przycisk Kolor obramowania
Możemy użyć border właściwość koloru przycisku granicznego:
Przykłady CSS
background-color: white;
Kolor: czarny;
border: 2px solid # 4CAF50; / * Zielony * /
}
...
Spróbuj »
Hover Przycisk
Możemy użyć :hover selektor zmodyfikować styl przez unoszące się nad przyciskiem.
Wskazówka: Możemy użyć transition-duration własność ustawiony na "hover" prędkość Efekt:
Przykłady CSS
-webkit-przejście-czas trwania: 0.4s; / * Safari * /
przejście-czas trwania: 0.4s;
}
.button: hover {
background-color: # 4CAF50; / * Zielony * /
kolor: biały;
}
...
Spróbuj »
przycisk cienia
Możemy użyć box-shadow właściwość, aby dodać cień do przycisku:
Przykłady CSS
box-shadow: 0 8 pikseli 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);
}
Spróbuj »
przycisk Wyłącz
Możemy użyć opacity właściwość, aby dodać przezroczystość (wygląda podobnie do "disabled" efekty atrybutów) dla przycisku.
Wskazówka: Co mogę dodać cursor nieruchomości i ustawiony na "nie-wolno", aby skonfigurować obraz niepełnosprawnej:
przycisk Szerokość
Domyślnie rozmiar tekstu przycisku na przycisk zdecydowała (na podstawie tekstu o długości pasującej). Możemy użyć width właściwość, aby ustawić szerokość przycisku:
Wskazówka: Jeśli chcesz ustawić stałą szerokość można używać pikseli (px) jako jednostki, jeżeli chcesz ustawić reagujących przycisków można ustawić w procentach.
przycisk Grupa
Usuń z zewnątrz i dodać float:left zestaw przycisków:
Z przyciskiem granicznego Grupy
Możemy użyć border właściwość, aby ustawić grupę przycisk z granicy: