Данную привлекательную кнопку сделать очень легко и просто.
Для начала создаем файл index.html и style.css прописываем оболочку htmlю
Заголовок я назвал Gradient button, вы можете по-своему
далее при помощи тега <a> мы создаём ссылку на которую вас будет перебрасывать после нажатия на кнопку, в ней создаём класс (я назвал его
button) , между тегов прописываем наш текст, который отобразится на кнопке
далее переходим к нашему css файлу
в body прописываем display - flex, затем с помощью justify-content - выравниваем по центру ,и с помощью align-items - по оси , затем высоту, внешний/внутренний отступ и цвет фона - белый
Затем в .button(класс нашей кнопки) прописываем размер текста, какой шрифт выбираем, цвет текста,
а вот где фон, мы прописываем background: linear-gradient указывает направление( в моём случае это влево) и цвета для него их брал на сайте-https://uigradients.com/
Дальше в декорирование текста прописываем none, внутренний отступ -padding: 20px 70px; закругление углов - border-radius: 50px; размер фоного изображения элемента - 200%, и анимацию градиента рекомендую ставить на .7s , но вы можете поставить чуть меньше или больше
И для того, чтобы происходила анимация текста при наведении на кнопку - пишем .button:hover
и в ней прописываем движение нашего градиента
background-position: right;
и всё
Спасибо за внимание
Программа в которой я пишу код https://brackets.io/
Исходный код - https://codepen.io/beefeer/pen/zYdGxmG?editors=1100