106 lines
3.9 KiB
Markdown
106 lines
3.9 KiB
Markdown
---
|
||
title: CSS Buttons
|
||
localeTitle: Кнопки CSS
|
||
---
|
||
## Кнопки CSS
|
||
|
||
* Вы можете создать любую кнопку clickable (элемент HTML `<button>` )
|
||
|
||
`<button>Click Me</button>`
|
||
|
||
* Кнопка по умолчанию выглядит следующим образом:
|
||
|
||
![Default Button Style](https://image.ibb.co/kCweAm/button.png "Стиль кнопки по умолчанию")
|
||
|
||
## Стилизация кнопки
|
||
|
||
Вы можете изменить несколько свойств кнопки, чтобы изменить ее внешний вид.
|
||
|
||
Чтобы добавить тени к кнопке, используйте свойство `box-shadow` .
|
||
|
||
Чтобы добавить прозрачность к кнопке для отключенного эффекта, используйте `opacity` свойства.
|
||
|
||
Чтобы удалить поля и создать группу кнопок, добавьте свойство `float:left/right` .
|
||
|
||
Чтобы создать группу кнопок, но с границами, используйте свойство `float` и добавьте `border property` .
|
||
|
||
Для создания вертикальной группы кнопок используйте display: `block property` .
|
||
|
||
### Цвет кнопки
|
||
|
||
Чтобы изменить цвет фона кнопки, используйте свойство background-color:
|
||
|
||
`button {background-color: #6ba0f4;}`
|
||
|
||
![Button Background-Color](https://image.ibb.co/f5Xpt6/button_bg_blue.png "Цвет фона кнопки")
|
||
|
||
Чтобы добавить цветную рамку к кнопке, используйте свойство border:
|
||
```
|
||
button {
|
||
background-color: #FFF;
|
||
color: #FFF;
|
||
border: 2px solid #6ba0f4;
|
||
}
|
||
```
|
||
|
||
![Button Border](https://image.ibb.co/kUqymR/button_border_blue.png "Пограничная кнопка")
|
||
|
||
### Размер текста кнопки
|
||
|
||
Чтобы изменить размер шрифта текста на кнопке, используйте свойство font-size:
|
||
|
||
`button {font-size: 20px;}`
|
||
|
||
![Button Text Size](https://image.ibb.co/gM9r6R/button_fontsize.png "Размер текста кнопки")
|
||
|
||
### Пусковая площадка
|
||
|
||
Чтобы изменить прописку кнопки, используйте свойство padding:
|
||
|
||
`button {padding: 15px 30px;}`
|
||
|
||
![Button Padding](https://image.ibb.co/fKer6R/button_padding.png "Пусковая площадка")
|
||
|
||
### Ширина кнопки
|
||
|
||
Чтобы изменить ширину кнопки, независимо от текстового содержимого, используйте свойство width:
|
||
|
||
`button {width: 250px;}`
|
||
|
||
![Button Width](https://image.ibb.co/cDgSfm/button_width.png "Ширина кнопки")
|
||
|
||
### Закругленные кнопки
|
||
|
||
Чтобы создать закругленные кнопки, используйте свойство border-radius:
|
||
|
||
`button {border-radius: 50%;}`
|
||
|
||
![Rounded Buttons](https://image.ibb.co/cfH00m/button_bradius.png "Закругленные кнопки")
|
||
|
||
### Напольные кнопки
|
||
|
||
Чтобы изменить стиль кнопки при перемещении мыши над ней, используйте селектор: hover:
|
||
```
|
||
button:hover {
|
||
background-color: #0E2C5B;
|
||
color: #FFF;
|
||
}
|
||
```
|
||
|
||
![Hoverable Buttons](https://image.ibb.co/hxQnfm/button_hover.png "Напольные кнопки")
|
||
|
||
Чтобы определить скорость эффекта наведения, используйте `transition-duration` свойства.
|
||
|
||
### Отключенные кнопки
|
||
|
||
Чтобы отключить кнопку, используйте свойство cursor:
|
||
```
|
||
button {
|
||
cursor: not-allowed;
|
||
}
|
||
```
|
||
|
||
#### Дополнительная информация:
|
||
|
||
* https://www.w3schools.com/css/css3\_buttons.asp
|
||
* https://www.w3schools.com/howto/howto _css_ animate\_buttons.asp |