Как сделать кнопку градиентом css

Чтобы создать кнопку с градиентным фоном в CSS, можно использовать свойства background и linear-gradient.

Например, чтобы создать кнопку с градиентным фоном, можно использовать следующий код:

HTML:

<button class="gradient-button">Кнопка с градиентом</button>

CSS:

.gradient-button {
  background: linear-gradient(to bottom, #2196f3, #008CBA); /* добавляем градиентный фон */
  color: #fff; /* задаем цвет текста на кнопке */
  padding: 10px 20px; /* добавляем отступы внутри кнопки */
  border: none; /* убираем рамку кнопки */
  border-radius: 5px; /* задаем скругление углов кнопки */
  cursor: pointer; /* меняем курсор при наведении на кнопку */
}

Сначала мы создаем кнопку с классом gradient-button. Затем, добавляем свойство background со значением linear-gradient, которое позволяет создать градиентный фон. Мы используем значения #2196f3 и #008CBA для создания градиента, который идет от голубого к темно-синему сверху вниз.

Задаем цвет текста на кнопке, добавляем отступы внутри кнопки, убираем рамку кнопки и задаем скругление углов кнопки.

Также мы меняем курсор при наведении на кнопку, чтобы пользователи понимали, что это интерактивный элемент.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как сделать кнопку градиентом css

Наш специалист свяжется с вами в ближайшее время и уточнит детали