—»     —»   Кнопка со скользящей иконкой
  Раздел: Кнопки   Нет комментариев  

Кнопка со скользящей иконкой



Кнопка со скользящей иконкой

Сегодня мы хотим воссоздать красивую кнопку, которая напоминает нам slide to unlock в iPhone. Реализацию данного проекта вы можете видеть в RSQ. Она состоит из круглой кнопки с круглой иконкой, которая проскальзывает по всей длине кнопки при смене заголовка кнопки. Это очень привлекательный эффект, который не так уж и сложно реализовать посредством CSS3-переходов. В данном проекте используются иконки из FontAwesome.

HTML-код

HTML-код очень простой, так как у нас здесь используется простой анкор с вложенными span-элементами для иконки и заголовков. Здесь представлено 2 заголовка: один отображается изначально, а второй появляется при наведении.

<a href="#" class="btn-slide">
<span class="circle"><span class="icon-long-arrow-right "></span></span>
<span class="title">Slide to Unlock</span>
<span class="title-hover">Unlocked!</span>
</a>

CSS-код

Основное, что делает CSS, это анимирует иконку, а также отвечает за отображение двух заголовков.

.btn-slide {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0 20px;

border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;

transition: .5s;
-webkit-transition: .5s;

border: 2px solid #1275b7;
}
.btn-slide:hover {
background-color: #1275b7;
}
.btn-slide:hover span.circle {
left: 100%;
margin-left: -45px;
background-color: #36a7f3;
}
.btn-slide:hover span.title {
left: 40px;
opacity: 0;
}
.btn-slide:hover span.title-hover {
opacity: 1;
left: 40px;
}

.btn-slide span.circle {
display: block;
background-color: #1275b7;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;

transition: .5s;
-webkit-transition: .5s;

border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}

.btn-slide span.title,
.btn-slide span.title-hover {
position: absolute;
left: 80px;
transition: .5s;
-webkit-transition: .5s;
}

.btn-slide span.title-hover {
left: 80px;
opacity: 0;
}

Посмотреть демо | Скачать
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: кнопки, CSS
Опубликовал Design FactoRy   Прочитано (раз): 3432   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930