Живые кнопки
Как применить? Все просто :) Вставляем код в блок конструктора, а к элементу присваиваем css класс
Кнопка стиль btn
В первых строках мы задали размеры и координаты нашего блика. Он будет в два раза больше кнопки по высоте и находится с левой стороны. Далее, мы добавили небольшое размытие и сделали более прозрачным.
Обратите внимание на фон, который мы прописали. С нуля до 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 секунды он будет находится в статичном положении, но визуально мы его не увидим. А потом анимация повторится.
Обратите внимание на фон, который мы прописали. С нуля до 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 секунды он будет находится в статичном положении, но визуально мы его не увидим. А потом анимация повторится.
See the Pen Pure CSS Floating Action Button by Алексей Тимофеев (@aeeaakmc-the-scripter) on CodePen.
Кнопка-меню
КнопкаКнопкаКнопкаКнопкаКнопкаКнопкаКнопкаКнопкаКнопкаКнопкаКнопкаКнопкаКнопкаКнопкаКнопкаКнопка
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
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
button1
button1
See the Pen gradient button hover effects by Naoya (@nxworld) on CodePen.
Дальше будет больше...
Где бы вы ни находились, мы можем вам помочь c решением вашей задачи.
Назад к модификациям