В первых строках мы задали размеры и координаты нашего блика. Он будет в два раза больше кнопки по высоте и находится с левой стороны. Далее, мы добавили небольшое размытие и сделали более прозрачным.
Обратите внимание на фон, который мы прописали. С нуля до 40% ширины блика (а он занимает 100% ширины кнопки) фон будет прозрачным, затем с 40% ширины до 60% фон будет белым.

И соответственно с 60% до 100% ширины — прозрачный фон.
С помощью transform мы его подвинули за пределы нашей кнопки, а также немного повернули.
А с помощью свойства animation мы указали, какую анимацию будем применять к этому псевдоэлементу. Также указали время, за которое должна быть выполнена анимация и задали значение infinite, что означает бесконечная анимация.Теперь пришло время прописать keyframes для анимации.

Keyframes – ключевые точки анимации. Keyframes помогает нам управлять промежуточными этапами во время анимации.

Давайте здесь подробнее остановимся.Мы задали, что наш блик будет начинать анимацию находясь за пределами кнопки по оси X (translate(-100%, -25%)). Через 20% (20 процентов от 5 секунд — одна секунда) блик (псевдоэлемент) будет уже в своем изначальном положении по оси X (translate(100%, -25%)). То есть он за одну секунду пройдет вдоль нашей кнопки.

А дальше замрет. То есть оставшиеся 80% (или 4 секунды он будет находится в статичном положении, но визуально мы его не увидим. А потом анимация повторится.

Кнопка-меню

custom-btn btn-1
custom-btn btn-2
custom-btn btn-3
custom-btn btn-4
custom-btn btn-5
custom-btn btn-6
custom-btn btn-7
custom-btn btn-8
custom-btn btn-9
custom-btn btn-10
custom-btn btn-11
custom-btn btn-12
custom-btn btn-13
custom-btn btn-14
custom-btn btn-15

btn-hover color-1
btn-hover color-2
btn-hover color-3
btn-hover color-4
btn-hover color-5
btn-hover color-6
btn-hover color-7
btn-hover color-8
btn-hover color-9
btn-hover color-10
btn-hover color-11

button1