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

 

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

Шаг 1. HTML

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

Не забывайте подключить стили к документу, ведь вся магия будет происходить именно здесь, перейдем к следующему шагу.

Шаг 2. CSS

Нам необходимо залить наши кнопки при помощи градиента, делаем мы это благодаря следующим стилям:

Затем нам нужно анимировать кнопки при наведении курсора мыши, делаем мы это вот таким простым способом:

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

Вот и все. Готово!