Создадим красивую кнопку с градиентом на 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;
}
Комментарии
0