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

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

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

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

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

  • Social Buttons - Библиотека социальных кнопок - это набор кнопок CSS, созданных на чистом CSS и основанных на Bootstrap и Font Awesome.

  • Beautons- Библиотека кнопок Beautons - это простой набор инструментов 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.

<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 и используя его вместе с именем класса, как показано ниже. В данном примере у нас есть изменения четырех размеров.

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

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

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

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

Sr. No. Стиль Средний размер Основной цвет Демо
1 bttn-наклонный 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-материал-круг bttn-md bttn-primary
7 bttn-fill-circle bttn-md bttn-primary
8 bttn-gradient bttn-md bttn-primary
9 bttn-jelly bttn-md bttn-primary
10 bttn-stretch bttn-md bttn-primary
11 bttn-минимальный bttn-md bttn-primary
12 bttn-окаймленный bttn-md bttn-primary
13 bttn-simple bttn-md bttn-primary

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

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

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

Загрузка bttn.css

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

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

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

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

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

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

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

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

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

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

<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, созданных на чистом 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.

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

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

Войти через Twitter

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

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

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

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

Войти через Twitter Войти через Twitter Войти через Twitter Войти через 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>

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

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

Sr. No. Стиль Средний размер Кнопка Значок Кнопка
1 btn-twitter btn-md Войти через Twitter
2 btn-bitbucket btn-md Войти через Bitbucket
3 btn-dropbox btn-md Войти через Dropbox
4 btn-facebook btn-md Войти с Facebook
5 btn-btn-flickr btn-md Войти через Flickr
6 btn-btn-foursquare btn-md Войти через Foursquare
7 btn-btn-github btn-md Войти через Github
8 btn-btn-google btn-md Войти через Google
9 btn-btn-instagram btn-md Войти через Instagram
10 btn-btn-linkedin btn-md Войти через Linkedin
11 БТН-БТН-Майкрософт btn-md Войти через Microsoft
12 бтн-бтн-одноклассники btn-md Войти через Одноклассники
13 btn-btn-openid btn-md Войти через Openid
14 btn-btn-pinterest btn-md Войти через Pinterest
15 btn-btn-Reddit btn-md Войти через Reddit
16 btn-btn-soundcloud btn-md Войти через Soundcloud
17 btn-btn-tumblr btn-md Войти через Tumblr
18 btn-btn-twitter btn-md Войти через Twitter
19 btn-btn-vimeo btn-md Войти через Vimeo
20 btn-btn-vk btn-md Войти через Vk
21 год btn-btn-yahoo btn-md Войти через Yahoo

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

Загрузка Beautons

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

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

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

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

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

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

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

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

<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 и используя его вместе с именем класса, как показано ниже. В данном примере у нас есть изменения четырех размеров.

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

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







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

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

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

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











Комбинирование стилей

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

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

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







А в абзаце.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved