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
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="/https/isolution.pro/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--blue">Submit</button>
   </body>
</html>

Wytworzy następujący wynik -

Definiowanie rozmiaru

<html>
   <head>
      <link rel = "stylesheet" href="/https/isolution.pro/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="/https/isolution.pro/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="/https/isolution.pro/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-blue">Submit</button>
   </body>
</html>

Wytworzy następujący wynik -

Definiowanie rozmiaru

<html>
   <head>
      <link rel = "stylesheet" href="/https/isolution.pro/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="/https/isolution.pro/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="/https/isolution.pro/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="/https/isolution.pro/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 -

Zaloguj się za pomocą Twittera

Definiowanie rozmiaru

<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="/https/isolution.pro/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 -

Zaloguj się za pomocą Twittera Zaloguj się za pomocą Twittera Zaloguj się za pomocą Twittera Zaloguj się za pomocą Twittera

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
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="/https/isolution.pro/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn"<Submit</button>
   </body>
</html>

Wytworzy następujący wynik -

Definiowanie rozmiaru

<html>
   <head>
      <link rel = "stylesheet" href="/https/isolution.pro/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

<html>
   <head>
      <link rel = "stylesheet" href="/https/isolution.pro/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="/https/isolution.pro/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="/https/isolution.pro/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.

↰ Previous page Next page ↱

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

Przyciski CSS - Szybki przewodnik

Ładowanie pliku bttn.css

Korzystanie z przycisku

Definiowanie rozmiaru

Definiowanie koloru

Ładowanie pliku bttn.css

Korzystanie z przycisku

Definiowanie rozmiaru

Definiowanie koloru

Ładowanie pliku bttn.css

Korzystanie z przycisku

Definiowanie rozmiaru

Definiowanie koloru

Definiowanie stylu

Ładowanie przycisków społecznościowych

Korzystanie z przycisku

Definiowanie rozmiaru

Korzystanie tylko z ikon

Ładowanie Beautonów

Korzystanie z przycisku

Definiowanie rozmiaru

Definiowanie rozmiaru czcionki

Definiowanie przycisków funkcyjnych

Łączenie stylów

Beautons

btns.css

bttn.css

Samouczek dotyczący przycisków CSS

Przyciski CSS Przydatne zasoby

Pushy Buttons

Przyciski społecznościowe

Language