Przyciski CSS - użycie btns.css

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 linku 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 -