Przyciski CSS - Szybki przewodnik
Przycisk na stronie internetowej jest głównym aktorem, w którym użytkownik klika po wybraniu lub wprowadzeniu wymaganych danych wejściowych i przesyła szczegóły, aby uzyskać wymagane informacje. Ten samouczek skupia się na dziesięciu głównych bibliotekach CSS, dzięki którym przyciski są niesamowite, a mianowicie -
bttn.css- Biblioteka bttn.css zawiera 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ć.
Pushy Buttons - Biblioteka Pushy Buttons to mała biblioteka CSS Pressable Buttons.
btns.css - Biblioteka przycisków btns.css to zestaw przycisków CSS, które wykorzystują płynne przejścia.
Social Buttons - Biblioteka Social Buttons to zestaw przycisków CSS wykonanych w czystym CSS i opartych na Bootstrap i Font Awesome.
Beautons- Biblioteka przycisków Beautons to prosty zestaw narzędzi CSS do tworzenia przycisków. Pozwala na zastosowanie kombinacji stylów, rozmiarów, aby stworzyć ogromny zestaw spójnych, solidnych i solidnych przycisków.
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ą tagu 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 -
Poniżej przedstawiono różne style dostępne w bttn.css
| Sr. No. | Styl | Średni rozmiar | Kolor podstawowy | Próbny |
|---|---|---|---|---|
| 1 | bttn-slant | bttn-md | bttn-primary | |
| 2 | bttn-unite | bttn-md | bttn-primary | |
| 3 | bttn-pill | bttn-md | bttn-primary | |
| 4 | bttn-float | bttn-md | bttn-primary | |
| 5 | bttn-material-flat | bttn-md | bttn-primary | |
| 6 | bttn-material-circle | bttn-md | bttn-primary | |
| 7 | bttn-fill-circle | bttn-md | bttn-primary | |
| 8 | bttn-gradient | bttn-md | bttn-primary | |
| 9 | galaretka bttn | bttn-md | bttn-primary | |
| 10 | bttn-stretch | bttn-md | bttn-primary | |
| 11 | bttn-minimal | bttn-md | bttn-primary | |
| 12 | bttn-graniczy | bttn-md | bttn-primary | |
| 13 | bttn-simple | bttn-md | bttn-primary |
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 -
Biblioteka przycisków btns.css to zestaw przycisków CSS, które wykorzystują płynne przejścia.
Ł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 = "btns.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/btns.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/btns.css">
</head>
<body>
<button class = "btn btn-lg btn-blue">Large</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/btns.css">
</head>
<body>
<button class = "btn btn-lg btn-red">Red</button>
<button class = "btn btn-lg btn-blue">Blue</button>
<button class = "btn btn-lg btn-green">Green</button>
<button class = "btn btn-lg btn-sea">Sea</button>
<button class = "btn btn-lg btn-yellow">Yellow</button>
<button class = "btn btn-lg btn-orange">Orange</button>
<button class = "btn btn-lg btn-purple">Purple</button>
<button class = "btn btn-lg btn-black">Black</button>
<button class = "btn btn-lg btn-cloud">Cloud</button>
<button class = "btn btn-lg btn-grey">Grey</button>
</body>
</html>Wytworzy następujący wynik -
Definiowanie stylu
Podobnie jak rozmiar, kolor możesz zdefiniować styl przycisku za pomocą CSS. Poniższy przykład pokazuje, jak zmienić styl przycisku.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/btns.css">
</head>
<body>
<button class = "btn btn-lg btn-blue">Regular</button>
<button class = "btn btn-lg btn-blue btn-round">Round</button>
<button class = "btn btn-lg btn-blue btn-raised">Raised</button>
<button class = "btn btn-blue btn-sm">Small</button>
<button class = "btn btn-lg btn-outline-blue ">Outlined</button>
</body>
</html>Wytworzy następujący wynik -
Biblioteka Social Buttons to zestaw przycisków CSS wykonanych w czystym CSS i opartych na Bootstrap i Font Awesome.
Ładowanie przycisków społecznościowych
Aby załadować bibliotekę bootstrap-social.css, pobierz plik bootstrap-social.css z github i wklej następujący wiersz w sekcji <head> strony internetowej.
<head>
<link rel = "stylesheet" href = "bootstrap-social.css">
</head>Korzystanie z przycisku
Utwórz przycisk za pomocą znacznika kotwicy html i dodaj style btn, btn-block ze specyfikatorem społecznościowym btn-social.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
</head>
<body>
<a class = "btn btn-block btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
</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/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
</head>
<body>
<a class = "btn btn-block btn-lg btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
<a class = "btn btn-block btn-md btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
<a class = "btn btn-block btn-sm btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
<a class = "btn btn-block btn-xs btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
</body>
</html>Wytworzy następujący wynik -
Korzystanie tylko z ikon
Poniższy przykład pokazuje, jak wybrać przyciski zawierające tylko ikony.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel = "stylesheet" href = "bootstrap-social.css">
</head>
<body>
<a class = "btn btn-social-icon btn-twitter">
<span class = "fa fa-twitter"></span>
</a>
</body>
</html>Wytworzy następujący wynik -
Poniżej przedstawiono różne style dostępne w przyciskach społecznościowych.
| Sr.No. | Styl | Średni rozmiar | Przycisk | Ikona przycisku |
|---|---|---|---|---|
| 1 | btn-twitter | btn-md | Zaloguj się za pomocą Twittera | |
| 2 | btn-bitbucket | btn-md | Zaloguj się za pomocą Bitbucket | |
| 3 | btn-dropbox | btn-md | Zaloguj się za pomocą Dropbox | |
| 4 | btn-facebook | btn-md | Zaloguj się przez facebook | |
| 5 | btn-btn-flickr | btn-md | Zaloguj się za pomocą Flickr | |
| 6 | btn-btn-foursquare | btn-md | Zaloguj się z Foursquare | |
| 7 | btn-btn-github | btn-md | Zaloguj się przez Github | |
| 8 | btn-btn-google | btn-md | Zaloguj się z Google | |
| 9 | btn-btn-instagram | btn-md | Zaloguj się przez Instagram | |
| 10 | btn-btn-linkedin | btn-md | Zaloguj się przez LinkedIn | |
| 11 | btn-btn-microsoft | btn-md | Zaloguj się z Microsoft | |
| 12 | btn-btn-odnoklassniki | btn-md | Zaloguj się przez Odnoklassniki | |
| 13 | btn-btn-openid | btn-md | Zaloguj się za pomocą Openid | |
| 14 | btn-btn-pinterest | btn-md | Zaloguj się przez Pinterest | |
| 15 | btn-btn-reddit | btn-md | Zaloguj się z Reddit | |
| 16 | btn-btn-soundcloud | btn-md | Zaloguj się z Soundcloud | |
| 17 | btn-btn-tumblr | btn-md | Zaloguj się z Tumblr | |
| 18 | btn-btn-twitter | btn-md | Zaloguj się za pomocą Twittera | |
| 19 | btn-btn-vimeo | btn-md | Zaloguj się za pomocą Vimeo | |
| 20 | btn-btn-vk | btn-md | Zaloguj się za pomocą Vk | |
| 21 | btn-btn-yahoo | btn-md | Zaloguj się z Yahoo |
Biblioteka przycisków Beautons to prosty zestaw narzędzi CSS do tworzenia przycisków. Pozwala na zastosowanie kombinacji stylów, rozmiarów, aby stworzyć ogromny zestaw spójnych, solidnych i solidnych przycisków.
Ładowanie Beautonów
Aby załadować bibliotekę Beautons, pobierz plik css z github i wklej następujący wiersz w sekcji <head> strony internetowej.
<head>
<link rel = "stylesheet" href = "beauton.min.css">
</head>Korzystanie z przycisku
Utwórz przycisk za pomocą tagu przycisku html i dodaj style btn.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
</head>
<body>
<button class = "btn"<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/beauton.min.css">
</head>
<body>
<button class = "btn btn--small">Small</button> <br/> <br/>
<button class = "btn btn--large btn-blue">Large</button><br/><br/>
<button class = "btn btn--huge">Huge</button><br/><br/>
<button class = "btn btn--full">Full</button><br/><br/>
</body>
</html>Wytworzy następujący wynik -
Definiowanie rozmiaru czcionki
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/beauton.min.css">
</head>
<body>
<button class = "btn btn--alpha">Huge</button><br/><br/>
<button class = "btn btn--beta">Large</button><br/><br/>
<button class = "btn btn--gamma">Regular</button><br/><br/>
</body>
</html>Wytworzy następujący wynik -
Definiowanie przycisków funkcyjnych
Poniższy przykład przedstawia różne przyciski funkcyjne.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
</head>
<body>
<button class = "btn btn--positive">Positive</button> <br/> <br/>
<button class = "btn btn--negative">Negative</button><br/><br/>
<button class = "btn btn--inactive">Disabled</button><br/><br/>
<button class = "btn btn--soft">Rounded</button><br/><br/>
<button class = "btn btn--hard">Hard</button><br/><br/>
</body>
</html>Wytworzy następujący wynik -
Łączenie stylów
Poniższy przykład pokazuje, jak połączyć style przycisków.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
</head>
<body>
<button class = "btn btn--large btn--positive">Button</button> <br/><br/>
<button class = "btn btn--positive btn--alpha btn--small">Button</button><br/><br/>
<button class = "btn btn--negative btn--full btn--soft">Button</button><br/><br/>
<p>A <button class = "btn btn--natural">button</button> in a paragraph.</p><br/><br/>
</body>
</html>Wytworzy następujący wynik -
ZA w akapicie.