Как оформить кнопку в 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 – добавляет плавную анимацию для изменения цвета фона при наведении на кнопку.