Яндекс Метрика
Как сделать кнопку с градиентом в CSS | Gradient button CSS / HTML

Как сделать кнопку с градиентом | Gradient button CSS

Как сделать кнопку с градиентом | Gradient button CSS

Как сделать кнопку с градиентом | Gradient button CSS

Для того, чтобы сделать кнопку с градиентом, необходимы минимальные навыки в CSS и HTML. Я подробно расписал, как сделать дизайн ещё интереснее.


HTML и CSS для создания градиентных кнопок на своём сайте.

Итог работы (цвет можно поменять по вашему усмотрению. Экспериментируйте.):


Каждый создатель сайта / проекта или любой другой графической части интерфейса чего-либо, будь то опытный верстальщик / веб-дизайнер, или начинающий веб-девелопер, хочет сделать свой проект красивым и имеющим нетривиальные элементы дизайна.

В настоящее время существует гигантское количество решений, которое поможет вам вдохновиться чем-то интересным, красочным и необычным. Классические кнопочки с ссылочками уже не так привлекают пользователей, да и самих владельцев ресурсов. Здорово, когда есть возможность использовать современный графический дизайн, стиль, элемент.

В этом примере мы добились интересных и необычных кнопок для перехода по ссылкам или для других ваших идей. Давайте разложим на элементы весь код.


HTML текст для описания контейнера, внутри которого кнопки с градиентом

Здесь всё просто: <div class = «kvasov-box-gradient»> – это элемент с классом, который представлен ниже в виде таблицы стилей. Отвечает за размер контейнера и прочие параметры.

А <a class = «kvasov-btn-gradient btn-color-2»>Наведи на меня</a> – это ссылка с классом, также с набором стилей. Как вы видите, никакого JS, только html и css.


CSS код, который описывает графическую (внешнюю) часть элементов.

Важные свойства в этом блоке:

  • transition: 0.5s – отвечает за время , при котором происходит изменение цвета;
  • background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%) – это заливка цветом градиентом в правую сторону (to right). Проценты определяют, какая площадь будет залита указанным цветом (#fda085 – цвет);
  • background-position: right center – это направление движения заливки новым цветом. Вы можете указывать на своё усмотрение.

Follow me: