Najlepszy samouczek Przycisk CSS W 2024 r. W tym samouczku możesz dowiedzieć się
Podstawowe Przycisk Style,przycisk kolor,przycisk Rozmiar,przycisk zaokrąglone,Przycisk Kolor obramowania,Hover Przycisk,przycisk cienia,przycisk Wyłącz,przycisk Szerokość,przycisk Grupa,Z przyciskiem granicznego Grupy,przycisk Animacja,
Przycisk CSS
W tej sekcji przedstawiamy użycie CSS do tworzenia przycisku.
Podstawowe Przycisk Style Domyślnie Button CSS
Przykłady CSS .button { 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 Czerwony Zielony Niebieski Szary Czarny
Możemy użyć background-color
właściwość, aby ustawić kolor przycisku:
Przykłady CSS .button1 {background-color: # 4CAF50;} / * Zielony * / .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 10px 12px 16px 20px 24px
Możemy użyć font-size
właściwość, aby ustawić rozmiar przycisku:
Przykłady CSS .button1 {font-size: 10px;} .button2 {font-size: 12px;} .button3 {font-size: 16px;} .button4 {font-size: 20px;} .button5 {font-size: 24px;}
Spróbuj » przycisk zaokrąglone 2px 12px 4px 8 pikseli 50%
Możemy użyć border-radius
właściwość, aby ustawić przycisk zaokrąglenia:
Przykłady CSS .button1 {border-radius: 2px;} .button2 {border-radius: 4px;} .button3 {border-radius: 8 pikseli;} .button4 {border-radius: 12px;} .button5 {border-radius: 50%;}
Spróbuj » Przycisk Kolor obramowania Czerwony Zielony Niebieski Szary Czarny Możemy użyć border
właściwość koloru przycisku granicznego:
Przykłady CSS .button1 { background-color: white; Kolor: czarny; border: 2px solid # 4CAF50; / * Zielony * / } pl.
Spróbuj » Hover Przycisk Czerwony Zielony Niebieski Szary Czarny Czerwony Zielony Niebieski Szary Czarny 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 .button { -webkit-przejście-czas trwania: 0.4s; / * Safari * / przejście-czas trwania: 0.4s; } .button: hover { background-color: # 4CAF50; / * Zielony * / kolor: biały; } pl.
Spróbuj » przycisk cienia Wyświetlacz cień po aktywowaniu przycisku cień Możemy użyć box-shadow
właściwość, aby dodać cień do przycisku:
Przykłady CSS .button1 { 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 Normalny Przycisk wyłączania 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:
Przykłady CSS .disabled { Zadymienie: 0,6; Kursor: nie-wolno; }
Spróbuj » przycisk Szerokość 250px 50% 100% 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.
Przykłady CSS .button1 {width: 250px;} .button2 {width: 50%;} .button3 {width: 100%;}
Spróbuj » przycisk Grupa Przycisk Przycisk
Usuń z zewnątrz i dodać float:left
zestaw przycisków:
Przykłady CSS .button { float: left; }
Spróbuj » Z przyciskiem granicznego Grupy Przycisk Przycisk
Możemy użyć border
właściwość, aby ustawić grupę przycisk z granicy:
Przykłady CSS .button { float: left; border: 1px solid green }
Spróbuj » przycisk Animacja Przykłady CSS Mysz nad przyciskiem strzałki, aby dodać:
Hover
Spróbuj » Przykłady CSS Dodaj kliknięcia "odzew" efekt:
Kliknij
Spróbuj » Przykłady CSS Kliknij po dodaniu "pull-down" efekt:
Kliknij
Spróbuj »