Библиотека кнопок Beautons — это простой CSS-инструментарий для создания кнопок. Это позволяет применять комбинации стилей, размеров для создания огромного набора последовательных, надежных и сплошных кнопок.
Загрузка Beautons
Чтобы загрузить библиотеку Beautons, загрузите css с github и вставьте следующую строку в раздел <head> веб-страницы.
<head> <link rel = "stylesheet" href = "beauton.min.css"> </head>
Использование кнопки
Создайте кнопку с помощью HTML-тега кнопки и добавьте стили 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>
Это даст следующий результат —
A in a paragraph.