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

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

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

Реклама

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

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

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

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

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

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

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

Эффект зеркального отражения

7 октября 2015 Антон Кулешов

Недавно я писал об 3D слайдере (ссылка ниже) и для его работы использовался маленький jQuery плагин reflection – этот скрипт позволяет добавить зеркальное отражение у картинки. Это довольно интересное решение, которое стоит добавить в копилку falbar. Полезность скрипта трудно переоценить: да, если вы прикрутили себе слайдер с пятью изображениями, то картинки можно подготовить и заранее в фотошопе, но если мы подгружаем новые картинки динамически или рандомной выборкой из, скажем, трех-четырех тысяч товаров нашего интернет магазина? Да, работа контент-менеджера встанет в копеечку, и скорее всего вы откажетесь от использования эффекта отражения в своем проекте.

Счетчик символов в текстовом поле на jQuery

11 августа 2014 Антон Кулешов

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

Смена изображений CSS3 слайдер

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

Уже давненько я нечего не добавлял по теме слайдеров и вот, как раз недавно, наткнулся на очень интересное решение с красивыми переходами при смене картинок. Сегодняшний слайдер не будет использовать никаких библиотек, а только возможности смены изображений в CSS3, что делает его лёгким и быстрым.