UI-компоненты. Кнопка с градиентом на CSS

Создадим красивую кнопку с градиентом на CSS и со значком Font Awesome. В этом примере код HTML создает кнопку с именем класса gradient-btn и включает значок Font Awesome внутри кнопки. Свойство background использует функцию linear-gradient для создания эффекта градиента от синего к фиолетовому. Свойства display: flex и align-items: center используются для выравнивания значка и текста внутри кнопки.

Пример, который мы сделаем:

HTML:

<button class="gradient-btn"><i class="fas fa-heart"></i>Button</button>

CSS:

/* Импорт иконок Font Awesome */
@import url("https://use.fontawesome.com/releases/v5.14.0/css/all.css");

/* Стилизуем кнопку с градиентом */
.gradient-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  background: linear-gradient(45deg, rgb(79, 79, 209), rgb(214, 9, 190));
  color: white;
}

/* Отступ справа для иконки */
.fas {
  margin-right: 10px;
}