freeCodeCamp/guide/russian/css/css-buttons/index.md

title, localeTitle

title	localeTitle
CSS Buttons	Кнопки CSS

Кнопки CSS

• Вы можете создать любую кнопку clickable (элемент HTML <button> )

<button>Click Me</button>

• Кнопка по умолчанию выглядит следующим образом:

Стилизация кнопки

Вы можете изменить несколько свойств кнопки, чтобы изменить ее внешний вид.

Чтобы добавить тени к кнопке, используйте свойство box-shadow .

Чтобы добавить прозрачность к кнопке для отключенного эффекта, используйте opacity свойства.

Чтобы удалить поля и создать группу кнопок, добавьте свойство float:left/right .

Чтобы создать группу кнопок, но с границами, используйте свойство float и добавьте border property .

Для создания вертикальной группы кнопок используйте display: block property .

Цвет кнопки

Чтобы изменить цвет фона кнопки, используйте свойство background-color:

button {background-color: #6ba0f4;}

Чтобы добавить цветную рамку к кнопке, используйте свойство border:

button { 
  background-color: #FFF; 
  color: #FFF; 
  border: 2px solid #6ba0f4; 
 } 

Размер текста кнопки

Чтобы изменить размер шрифта текста на кнопке, используйте свойство font-size:

button {font-size: 20px;}

Пусковая площадка

Чтобы изменить прописку кнопки, используйте свойство padding:

button {padding: 15px 30px;}

Ширина кнопки

Чтобы изменить ширину кнопки, независимо от текстового содержимого, используйте свойство width:

button {width: 250px;}

Закругленные кнопки

Чтобы создать закругленные кнопки, используйте свойство border-radius:

button {border-radius: 50%;}

Напольные кнопки

Чтобы изменить стиль кнопки при перемещении мыши над ней, используйте селектор: hover:

button:hover { 
  background-color: #0E2C5B; 
  color: #FFF; 
 } 

Чтобы определить скорость эффекта наведения, используйте 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