Przyciski CSS - użycie bttn.css
Biblioteka bttn.css zapewnia ogromną kolekcję prostych stylów przycisków. Ta biblioteka jest całkowicie bezpłatna zarówno do użytku osobistego, jak i komercyjnego. Te przyciski można łatwo dostosować.
Ładowanie pliku bttn.css
Aby załadować bibliotekę btns.css, przejdź do odsyłacza btns.css i wklej następujący wiersz w sekcji <head> strony internetowej.
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>Korzystanie z przycisku
Utwórz przycisk za pomocą znacznika przycisku html i dodaj style bttn-slant, bttn-royal ze specyfikatorem rozmiaru bttn-lg.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>
<body>
<button class = "bttn-slant">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 = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>
<body>
<button class = "bttn-pill bttn-lg">Large</button>
<button class = "bttn-pill bttn-md">Medium</button>
<button class = "bttn-pill bttn-sm">Small</button>
<button class = "bttn-pill bttn-xs">Extra 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 = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>
<body>
<button class = "bttn-pill bttn-lg bttn-primary">Primary</button>
<button class = "bttn-pill bttn-md bttn-warning">Warning</button>
<button class = "bttn-pill bttn-sm bttn-danger">Danger</button>
<button class = "bttn-pill bttn-xs bttn-success">Success</button>
<button class = "bttn-pill bttn-xs bttn-royal">Royal</button>
</body>
</html>Wytworzy następujący wynik -