Кнопки CSS - использование нажимных кнопок

Библиотека Pushy Buttons - это небольшая библиотека CSS Pressable Buttons.

Загрузка bttn.css

Чтобы загрузить библиотеку pushy-buttons.min.css, загрузите css с github и вставьте следующую строку в раздел <head> веб-страницы.

<head>
   <link rel = "stylesheet" href = "pushy-buttons.min.css">
</head>

Использование кнопки

Создайте кнопку с помощью тега кнопки html и добавьте стили btn, btn-blue с указателем размера 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>

Он выдаст следующий результат -

Определение размера

Вы можете увеличить или уменьшить размер кнопки, определив ее размер с помощью CSS и используя его вместе с именем класса, как показано ниже. В данном примере у нас есть изменения четырех размеров.

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

Он выдаст следующий результат -

Определение цвета

Как и размер, вы можете определить цвет кнопки с помощью CSS. В следующем примере показано, как изменить цвет кнопки.

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

Он выдаст следующий результат -