Кнопки – неотъемлемая часть любого сайта, обеспечивающая интерактивность и удобство использования. Они должны быть не просто статичным текстом, а элементами с анимацией или иным действием при нажатии. В этом обзоре рассмотрим Unicorn UI – фреймворк, предлагающий стили для создания невероятно красивых и функциональных кнопок.
Быстрый старт с Unicorn UI
Для начала работы понадобится текстовый редактор (например, Atom). Создайте два файла: buttons.css для стилей и index.html – HTML-документ. CSS-код скачивается с сайта Unicorn UI (ссылка опущена). Скопируйте весь код из файла buttons.css и сохраните его в созданный файл buttons.css. В index.html добавьте ссылку на этот файл:
<link rel="stylesheet" href="buttons.css">В <body> вашего index.html файла вставьте код кнопок, скопированный с сайта Unicorn UI. Для корректной работы некоторых стилей потребуется подключить шрифт Font Awesome (ссылка опущена). Вставьте соответствующий код в ваш index.html.
Стили и варианты кнопок
Unicorn UI предлагает широкий спектр стилей кнопок. Можно использовать готовые классы для изменения размера и формы:
- button: базовый класс кнопки.
- button-tiny: маленькая кнопка.
- button-rounded: кнопка с закругленными краями.
- button-pill: кнопка с более закругленными краями.
- button-jumbo: большая кнопка.
- button-border: кнопка с обводкой.
- button-border-rounded: кнопка с обводкой и закругленными краями.
Эти классы добавляются к тегу <button>. Например, для создания большой кнопки с закругленными краями используйте <button class=»button button-jumbo button-rounded»>.
3D-кнопки и анимация
Особое внимание заслуживают 3D-кнопки. Они не только стильно выглядят, но и обладают анимацией при нажатии: кнопка уменьшается, а изображение на ней становится прозрачнее. Код для 3D-кнопок копируется с сайта Unicorn UI и вставляется в HTML-код.
Дополнительные возможности
Unicorn UI предоставляет стили не только для кнопок, но и для других элементов интерфейса, например, выпадающих списков и чекбоксов.
Пример стилизованного чекбокса: <input type=»checkbox»>.
Unicorn UI – удобный инструмент для создания красивых и функциональных кнопок и других элементов интерфейса. Простота использования и большое количество стилей делают его отличным выбором для разработчиков. Возможности кастомизации и добавление дополнительных классов позволяют настраивать внешний вид кнопок под любой дизайн. Добавление атрибута disabled к тегу <button> сделает кнопку неактивной.