16.04.14, 16:05
0 комментарий
  Уроки

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

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




Посмотреть так же можно на нашем сайте кнопка СПАСИБО, под полной новостью.

BACKUP файлов для наших читателей в архивешаблоны для dle 11.2

Напишите своё мнение