Учебники

Кнопки CSS — Краткое руководство

Октябрь 16, 2018

Кнопки CSS — Обзор

Кнопка на веб-странице является основным участником, на котором пользователь щелкает мышью после выбора или ввода необходимых входных данных и отправляет данные для получения необходимой информации. Этот урок посвящен десяти основным библиотекам CSS, чтобы сделать кнопки удивительными, а именно —

  • bttn.css — библиотека bttn.css предоставляет огромную коллекцию простых стилей для кнопок. Эта библиотека абсолютно бесплатна для личного и коммерческого использования. Эти кнопки можно легко настроить.

  • Pushy Buttons — Библиотека Pushy Buttons представляет собой небольшую библиотеку CSS Pressable Buttons.

  • btns.css — библиотека кнопок btns.css представляет собой набор кнопок CSS, которые используют плавные переходы.

  • Social Buttons — библиотека Social Buttons представляет собой набор кнопок CSS, выполненных на чистом CSS и основанных на Bootstrap и Font Awesome.

  • Beautons — библиотека кнопок Beautons — это простой CSS-инструментарий для создания кнопок. Это позволяет применять комбинации стилей, размеров для создания огромного набора последовательных, надежных и сплошных кнопок.

bttn.css — библиотека bttn.css предоставляет огромную коллекцию простых стилей для кнопок. Эта библиотека абсолютно бесплатна для личного и коммерческого использования. Эти кнопки можно легко настроить.

Pushy Buttons — Библиотека Pushy Buttons представляет собой небольшую библиотеку CSS Pressable Buttons.

btns.css — библиотека кнопок btns.css представляет собой набор кнопок CSS, которые используют плавные переходы.

Social Buttons — библиотека Social Buttons представляет собой набор кнопок CSS, выполненных на чистом CSS и основанных на Bootstrap и Font Awesome.

Beautons — библиотека кнопок Beautons — это простой CSS-инструментарий для создания кнопок. Это позволяет применять комбинации стилей, размеров для создания огромного набора последовательных, надежных и сплошных кнопок.

CSS-кнопки — bttn.css Использование

Библиотека bttn.css предоставляет огромную коллекцию простых стилей для кнопок. Эта библиотека абсолютно бесплатна для личного и коммерческого использования. Эти кнопки можно легко настроить.

Загрузка bttn.css

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

<head>
   <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>

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

Создайте кнопку с помощью HTML-тега кнопки и добавьте стили bttn-slant, bttn-royal с указателем размера bttn-lg.

Live Demo 

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

Это даст следующий результат —

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

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

Live Demo 

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

Это даст следующий результат —




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

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

Live Demo 

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

Это даст следующий результат —





CSS кнопки — bttn.css Доступные стили

Ниже приведены различные стили, доступные в bttn.css.

Старший Стиль Средний размер Основной цвет демонстрация
1 BTTN-наклонная BTTN-мкр BTTN первичной
2 BTTN объединиться BTTN-мкр BTTN первичной
3 BTTN-таблетки BTTN-мкр BTTN первичной
4 BTTN-поплавок BTTN-мкр BTTN первичной
5 BTTN-материал, плоский BTTN-мкр BTTN первичной
6 BTTN-материал круг BTTN-мкр BTTN первичной
7 BTTN-фасовочно-круг BTTN-мкр BTTN первичной
8 BTTN-градиент BTTN-мкр BTTN первичной
9 BTTN-желе BTTN-мкр BTTN первичной
10 BTTN растяжения BTTN-мкр BTTN первичной
11 BTTN-минимален BTTN-мкр BTTN первичной
12 BTTN каймой BTTN-мкр BTTN первичной
13 BTTN-простой BTTN-мкр BTTN первичной

Кнопки CSS — использование Pushy Buttons

Библиотека 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.

Live Demo 

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--blue">Submit</button>
   </body>
</html>

Это даст следующий результат —

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

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

Live Demo 

<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. В следующем примере показано, как изменить цвет кнопки.

Live Demo 

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

Это даст следующий результат —



CSS кнопки — btns.css Использование

Библиотека кнопок btns.css представляет собой набор кнопок CSS, которые используют плавные переходы.

Загрузка bttn.css

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

<head>
   <link rel = "stylesheet" href = "btns.css">
</head>

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

Создайте кнопку с помощью HTML-тега кнопки и добавьте стили btn, btn-blue с указателем размера btn-lg.

Live Demo 

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-blue">Submit</button>
   </body>
</html>

Это даст следующий результат —

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

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

Live Demo 

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

Это даст следующий результат —


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

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

Live Demo 

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

Это даст следующий результат —










Определение стиля

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

Live Demo 

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

Это даст следующий результат —





CSS-кнопки — использование социальных кнопок

Библиотека Social Buttons представляет собой набор кнопок CSS, выполненных на чистом CSS и основанных на Bootstrap и Font Awesome.

Загрузка социальных кнопок

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

<head>
   <link rel = "stylesheet" href = "bootstrap-social.css">
</head>

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

Создайте кнопку с помощью тега привязки html и добавьте стили btn, btn-block с социальным спецификатором btn-social.

Live Demo 

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

Это даст следующий результат —


Login with Twitter

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

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

Live Demo 

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

Это даст следующий результат —


Login with Twitter

Login with Twitter

Login with Twitter

Login with Twitter

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

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

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

Это даст следующий результат —

CSS-кнопки — Доступные стили социальных кнопок

Ниже приведены различные стили, доступные в социальных кнопках.

Sr.No. Стиль Средний размер кнопка Кнопка со значком
1 БТН-твиттер БТН-мкр Войти через Twitter
2 БТН-Bitbucket БТН-мкр Войти с помощью Bitbucket
3 БТН-раздаточная БТН-мкр Войти с Dropbox
4 БТН-facebook БТН-мкр Войти с Facebook
5 БТН-БТН-Flickr БТН-мкр Войти через Flickr
6 БТН-БТН-четвероугольник БТН-мкр Войти с Foursquare
7 БТН-БТН-GitHub БТН-мкр Войти через Github
8 БТН-БТН-Google БТН-мкр Войти через Google
9 БТН-БТН-Instagram БТН-мкр Войти через Instagram
10 БТН-БТН-LinkedIn БТН-мкр Войти через Linkedin
11 БТН-БТН-Microsoft БТН-мкр Войти через Microsoft
12 БТН-БТН-одноклассники БТН-мкр Войти с помощью Одноклассников
13 БТН-БТН-OpenID БТН-мкр Войти через Openid
14 БТН-БТН-Pinterest БТН-мкр Войти через Pinterest
15 БТН-БТН-Reddit БТН-мкр Войти через Reddit
16 БТН-БТН-SoundCloud БТН-мкр Войти через Soundcloud
17 БТН-БТН-Tumblr БТН-мкр Войти с Tumblr
18 БТН-БТН-твиттер БТН-мкр Войти через Twitter
19 БТН-БТН-Vimeo БТН-мкр Войти с Vimeo
20 БТН-БТН-VK БТН-мкр Войти через Vk
21 БТН-БТН-Yahoo БТН-мкр Войти через Yahoo

Кнопки CSS — Использование Beautons

Библиотека кнопок Beautons — это простой CSS-инструментарий для создания кнопок. Это позволяет применять комбинации стилей, размеров для создания огромного набора последовательных, надежных и сплошных кнопок.

Загрузка Beautons

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

<head>
   <link rel = "stylesheet" href = "beauton.min.css">
</head>

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

Создайте кнопку с помощью HTML-тега кнопки и добавьте стили btn.

Live Demo 

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn"<Submit</button>
   </body>
</html>

Это даст следующий результат —

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

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

Live Demo 

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

Это даст следующий результат —

Определение размера шрифта

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

Live Demo 

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

Это даст следующий результат —

Определение функциональных кнопок

В следующем примере показаны различные функциональные кнопки.

Live Demo 

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

Это даст следующий результат —

Объединение стилей

В следующем примере показано, как комбинировать стили кнопок.

Live Demo 

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

Это даст следующий результат —

A in a paragraph.

43
Share: