Как оформить кнопку в CSS

Оформление кнопки в CSS можно осуществить различными способами. Вот пример, как можно оформить кнопку:

<button class="my-button">Кнопка</button>

.my-button {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  background-color: #428bca;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.my-button:hover {
  background-color: #3071a9;
}

В данном примере кнопка имеет class my-button.

Рассмотрим каждое свойство в CSS для кнопки подробнее:

• display: inline-block — устанавливает отображение элемента как блочный, но с возможностью установки отступов и выравнивания элемента как инлайнового элемента;
• padding: 0.5rem 1rem— устанавливает внутренний отступ на кнопке;
• font-size: 1rem — устанавливает размер шрифта;
• font-weight: bold — делает текст жирным;
• color: #fff — устанавливает цвет текста на белый;
• background-color: #428bca — устанавливает фоновый цвет для кнопки;
• border: none — убирает рамку кнопки;
• border-radius: 0.5rem — добавляет скругление углов к кнопке;
• cursor: pointer — устанавливает курсор при наведении на кнопку;
• text-align: center — выравнивание текста по центру;
• text-decoration: none — отменяет подчеркивание текста;
• transition: background-color 0.3s ease — добавляет плавную анимацию для изменения цвета фона при наведении на кнопку.

При наведении на кнопку меняется цвет фона с помощью псевдокласса :hover.