Открываем демо материал и изучаем представленный вариант, фактически полностью готового кнопочного функционала. Все что остается – это прикрепить соответствующий файл со стилями на свою страницу, а далее просто копируем CSS классы к нужным элементам. Кнопки подобраны в стилистические группы: есть и «в корзину», и «мне нравится», и звёздочка для избранного, и много чего ещё – остается только выбрать что из этого вам нужно.
К слову, эффекты разбиты на классы и подклассы и выглядят так:
<button class="btn btn-1 btn-1a">Кнопка</button>
Формируется кнопка при добавлении к нему трех классов:
- btn – общие стили для всех видов кнопок;
- btn-1 – стили к конкретному виду кнопок;
- btn-1a – стили для эффекта.
Собственно, это формальное разделение, и сделано для того, чтобы демо материал кнопок был легко читаем. Для реальных проектов лучше прописать свои отдельные классы или скопировать нужные строки из библиотеки в уже существующие. Ну, а для ленивых Ctrl+C/Ctrl+V в помощь.