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