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 файлов для наших читателей в архиве

СКАЧАТЬ

Вес файла
25.35 Kb

Реклама

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

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204