Библиотека кнопок 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>
Это даст следующий результат —