Кнопки для сайта одним набором

24 июня 2015 Антон Кулешов 1232 0

Продолжаем прокачивать дизайн наших страниц, и сегодня я хочу обратить ваше внимание на целую палитру красивых кнопок для сайта. «Правильно» расставленные кнопки – это душа продающего сайта, они должны привлекать внимание пользователя, чтобы он не смог покинуть страницу не нажав парочку из них. Маркетинг прочно впился в дизайнерскую часть и его не обойдешь стороной, если конечно вы не содержите захудалый сайт с парой-тройкой посетителей. Красивая и призывная кнопка для посетителя - как красная тряпка для быка, оно вроде ему и не надо, но манит чертовка.

Реклама

Открываем демо материал и изучаем представленный вариант, фактически полностью готового кнопочного функционала. Все что остается – это прикрепить соответствующий файл со стилями на свою страницу, а далее просто копируем CSS классы к нужным элементам. Кнопки подобраны в стилистические группы: есть и «в корзину», и «мне нравится», и звёздочка для избранного, и много чего ещё – остается только выбрать что из этого вам нужно.

К слову, эффекты разбиты на классы и подклассы и выглядят так:

<button class="btn btn-1 btn-1a">Кнопка</button>

Формируется кнопка при добавлении к нему трех классов:

  • btn – общие стили для всех видов кнопок;
  • btn-1 – стили к конкретному виду кнопок;
  • btn-1a – стили для эффекта.

Собственно, это формальное разделение, и сделано для того, чтобы демо материал кнопок был легко читаем. Для реальных проектов лучше прописать свои отдельные классы или скопировать нужные строки из библиотеки в уже существующие. Ну, а для ленивых Ctrl+C/Ctrl+V в помощь.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Сборник анимации на CSS3

22 августа 2015 Антон Кулешов

Сегодня для создания конкурентно-способного веб-ресурса приходится учитывать многое: начиная от интуитивно понятного дизайна страницы и заканчивая различными текстами, которые должны привлечь и удержать посетителя. Мы же в этой статье уделим внимание динамике, происходящей на страницах, которая стала неотъемлемой их частью. Если раньше для того, чтобы добавить какой-нибудь эффект нам приходилось использовать различные библиотеки или писать код на JavaScript, то сейчас лучший способ оживить сайт - это воспользоваться анимацией за счёт CSS3.

Всплывающие подсказки balloon CSS

8 июня 2016 Антон Кулешов

Приветствую, друзья! Недавно работал над одним сайтом и в коде увидел очень интересную CSS библиотечку для добавления всплывающих подсказок. Решений на эту тему есть уже масса, и я неоднократно добавлял к себе на сайт разные варианты, но увидев balloon решил о нём написать.

Прогресс бар как на YouTube

8 сентября 2015 Антон Кулешов

Времена долгой загрузки страниц из интернета ушли в далекое прошлое, но запросы пользователей тоже возросли, и теперь смотреть фильмы и играть через интернет – наша повседневность. Но потребности растут и растут, а скорость вашего провайдера, не всегда за ними поспевает. Даже если у вас выделенная оптоволоконная линия, то и она не сможет решить всех проблем. Дело в том, что ряд задач требует большой нагрузки на сервер, а тот, в свою очередь, просто не может отдавать данные быстрее, скажем, когда мы пользуемся онлайн обработкой фото и видео. Чтобы сообщить пользователю, что на сайте все же что-то происходит – приходится использовать прогресс бар.