freeCodeCamp

title	localeTitle
CSS Buttons	Кнопки CSS

Кнопки CSS

<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; 
 }