CSS-кнопки
В HTML мы используем тег button для создания кнопки, но с помощью свойств CSS мы можем стилизовать кнопки. Кнопки помогают нам создавать взаимодействие с пользователем и обработку событий. Они являются одним из широко используемых элементов веб-страниц.
Во время отправки формы, чтобы просмотреть или получить некоторую информацию, мы обычно используем кнопки.
Давайте посмотрим на основные стили кнопок.
Базовый стиль в кнопках
Доступно несколько свойств, которые используются для стилизации элемента кнопки. Давайте обсудим их один за другим.
background-color
это свойство используется для установки цвета фона элемента кнопки.
Пример
<html>
<head>
<title>Document</title>
<style>
body {
text-align: center;
}
button {
color: lightgoldenrodyellow;
font-size: 30px;
}
.b1 {
background-color: red;
}
.b2 {
background-color: blue;
}
.b3 {
background-color: violet;
}
</style>
</head>
<body>
<button class="b1">Красный цвет кнопки</button>
<button class="b2">Синий цвет кнопки</button>
<button class="b3">фиолетовый цвет кнопки</button>
</body>
</html>
border
Он используется для установки границы кнопки.
Пример
<html>
<head>
<title>Document</title>
<style>
body {
text-align: center;
}
button {
color: lightgoldenrodyellow;
font-size: 30px;
}
.b1 {
background-color: red;
border: none;
}
.b2 {
background-color: blue;
border: 5px brown solid;
}
.b3 {
background-color: yellow;
color: black;
border: 5px red groove;
}
.b4 {
background-color: orange;
border: 5px red dashed;
}
.b5 {
background-color: gray;
border: 5px black dotted;
}
.b6 {
background-color: lightblue;
border: 5px blue double;
}
</style>
</head>
<body>
<button class="b1">none</button>
<button class="b2">solid</button>
<button class="b3">groove</button>
<button class="b4">dashed</button>
<button class="b5">dotted</button>
<button class="b6">double</button>
</body>
</html>
border-radius
Используется для закругления углов. Он устанавливает радиус границы кнопки.
Пример
<html>
<head>
<title>Document</title>
<style>
body {
text-align: center;
}
button {
color: lightgoldenrodyellow;
font-size: 30px;
}
.b1 {
background-color: red;
border: none;
}
.b2 {
background-color: blue;
border: 5px brown solid;
border-radius: 7px;
}
.b3 {
background-color: yellow;
color: black;
border: 5px red groove;
border-radius: 10px;
}
.b4 {
background-color: orange;
border: 5px red dashed;
border-radius: 20px;
}
.b5 {
background-color: gray;
border: 5px black dotted;
border-radius: 30px;
}
.b6 {
background-color: lightblue;
border: 5px blue double;
border-radius: 25px;
}
</style>
</head>
<body>
<button class="b1">none</button>
<button class="b2">solid 7px</button>
<button class="b3">groove 10px</button>
<button class="b4">dashed 20px</button>
<button class="b5">dotted 30px</button>
<button class="b6">double 25px</button>
</body>
</html>
box-shadow
это используется для создания тени окна кнопки. Он используется для добавления тени к кнопке. Мы также можем создать тень во время наведения на кнопку.
Пример
<html>
<head>
<title>Document</title>
<style>
body {
text-align: center;
}
button {
color: lightgoldenrodyellow;
font-size: 30px;
}
.b1 {
background-color: lightblue;
border: 5px red double;
border-radius: 25px;
color: black;
box-shadow: 0 8px 16px 0 black, 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.b2 {
background-color: lightblue;
border: 5px red dotted;
color: black;
border-radius: 25px;
}
.b2:hover {
box-shadow: 0 8px 16px 0 black, 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
</head>
<body>
<button class="b1">Shadow on button>/button>
</body>
</html>
padding
Он используется для установки отступов кнопок.
Пример
<html>
<head>
<title>Document</title>
<style>
body {
text-align: center;
}
button {
color: lightgoldenrodyellow;
font-size: 30px;
}
.b1 {
background-color: red;
border: none;
padding: 16px;
}
.b2 {
background-color: blue;
border: 5px brown solid;
padding: 15px 30px 25px 40px;
}
.b3 {
background-color: yellow;
color: black;
border: 5px red groove;
padding-top: 30px;
}
.b4 {
background-color: orange;
border: 5px red dashed;
padding-bottom: 40px;
}
.b5 {
background-color: gray;
border: 5px black dotted;
padding-left: 40px;
}
.b6 {
background-color: lightblue;
border: 5px blue double;
padding-right: 40px;
}
</style>
</head>
<body>
<button class="b1">none</button>
<button class="b2">solid</button>
<button class="b3">groove</button>
<button class="b4">dashed</button>
<button class="b5">dotted</button>
<button class="b6">double</button>
</body>
</html>
