Сегодня мы хотим воссоздать красивую кнопку, которая напоминает нам 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;
}
Посмотреть демо | Скачать
Внимание! У вас нет прав для просмотра скрытого текста.