Як зробити анімовану кнопку меню на scss.

Відео: CSS анімація елементів при наведенні

Всім привіт! У цій статті ми розглянемо, як зробити анімовану іконку меню на SCSS.

Пам`ятається, недавно я писав статтю, що розповідає, навіщо потрібні міксини в Sass. У цій же статті ми розглянемо конкретний приклад їх використання, щоб ви краще змогли зрозуміти, як сильно вони можуть полегшувати життя, втім, як і сам препроцесор css коду.

Відео: Анімована КНОПКА на CSS / Button animation CSS3

Ось ви вирішили встановити собі на сайт красиву іконку меню. Що ви будете робити? Звичайно, можна написати свою, а можна використовувати вже готове рішення за допомогою Міксини для Sass. Давайте розглянемо конкретний приклад.

Ми будемо використовувати кнопочку Sass Burger. Перейдіть на сайт, щоб подивитися демо.

Тут же, прямо на сайті під кнопкою, ви можете бачити, як її використовувати:

Просто, чи не так? А тепер подивіться, як вона була написана. Для цього натисніть Download on Github внизу сторінки і відкрийте файл burger.scss. Думаю, різниця зрозуміла.

Відео: Анімована кнопка для сайту на CSS

Щоб встановити кнопку, просто скачайте всі необхідні файли або встановіть їх через Bower:

Як використовувати її, думаю, вже зрозуміло, а якщо немає, то ви можете відкрити папку Demo(Там же на Github) І подивитися вихідний код.

Відео: [# 3] Крута Кнопка Меню CSS / JS | Крутий UI туторіал

А у мене на цьому все. Сподіваюся, ви стали краще розуміти, для чого потрібні міксини в Sass.

Дякую за увагу!