Przyciski CSS - użycie przycisków
Biblioteka Pushy Buttons to mała biblioteka CSS Pressable Buttons.
Ładowanie pliku bttn.css
Aby załadować bibliotekę pushy-buttons.min.css, pobierz plik css z github i wklej następujący wiersz w sekcji <head> strony internetowej.
<head>
<link rel = "stylesheet" href = "pushy-buttons.min.css">
</head>Korzystanie z przycisku
Utwórz przycisk za pomocą tagu przycisku html i dodaj style btn, btn-blue z określnikiem rozmiaru btn-lg.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
</head>
<body>
<button class = "btn btn--blue">Submit</button>
</body>
</html>Wytworzy następujący wynik -
Definiowanie rozmiaru
Możesz zwiększyć lub zmniejszyć rozmiar przycisku, definiując jego rozmiar za pomocą CSS i używając go razem z nazwą klasy, jak pokazano poniżej. W podanym przykładzie mamy zmiany czterech rozmiarów.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
</head>
<body>
<button class = "btn btn--lg btn--blue">Large</button>
<button class = "btn btn--df btn--blue">Normal</button>
<button class = "btn btn--md btn--blue">Medium</button>
<button class = "btn btn--sm btn--blue">Small</button>
</body>
</html>Wytworzy następujący wynik -
Definiowanie koloru
Podobnie jak rozmiar, możesz zdefiniować kolor przycisku za pomocą CSS. Poniższy przykład pokazuje, jak zmienić kolor przycisku.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
</head>
<body>
<button class = "btn btn--lg btn--red">Large</button>
<button class = "btn btn--df btn--green">Normal</button>
<button class = "btn btn--md btn--blue">Medium</button>
</body>
</html>Wytworzy następujący wynik -