Sliding Icon Button

Introduction

Today I am going to recreate a beautiful button that reminds me of the iPhone slide to unlock idea. You can see it implemented at RSQ. It consists of a rounded button with a circle icon that slides across the length of the button as the button title changes. Its a pretty sweet effect thats very simple using CSS3 transitions. The sliding icons use FontAwesome icons.

HTML

The HTML is simple because it just an anchor with some nested spans for the icon and the titles. There are 2 titles, one that is shown initially and one that fades in on hover.

<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

The main thing that the CSS does is animate the icon across the button and crossfading the two titles.

.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;
  }

The post Sliding Icon Button appeared first on webdesigncrowd.com.