Анимированные иконки соц. сетей на CSS3

CSS3 23.01.2016

В передыдущих уроках «Интересные кнопки поделиться в соцсетях на CSS3» и «Анимация кнопки читать в Twitter на CSS3» я писал как можно сделать интересные и необычные кнопки для соцсетей, а самое главное, что без скриптов и на чистом CSS. Продолжая эту тему хочу поделиться очередной рпример оформления своего сайта!

ДЕМО

В этом уроке мы будем использовать изображение.

Вставляете скопированный код в нужное вам место на сайте

HTML

<div class="section_center">
        <div class="section_blok social-share fb">
            <span class="fb-inner"></span>
            <a class="cta fb" href="https://www.facebook.com/groups/ssdrus/">Like</a>
        </div>
        <div class="section_blok social-share tw">
            <span class="tw-inner"></span>
            <a class="cta tw" href="http://twitter.com/ssdru">Tweet</a>
        </div>
</div>

Теперь подключаем стили

CSS

.section_center {
  width: 200px;
  display: block;
}
.section_blok {
  display: block;
  width: 50px;
  float:left;
}
span {
  position: absolute;
  top: 7px;
  left: 16px;
  text-align: center;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  display: block;
}
span.fb-inner {
  background: no-repeat url('http://s-sd.ru/templates/new-ssd/images/sprite.png') -41px 0;
  width: 40px;
  height: 40px;
}
span.tw-inner {
  background: no-repeat url('http://s-sd.ru/templates/new-ssd/images/sprite.png') 0 0;
  width: 40px;
  height: 40px;
}
.social-share {
  width: 72px;
  height: 54px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}
.social-share:first-of-type {
  margin-right: 10px;
}
.social-share.fb {
  background: -webkit-gradient(radial, 37 56, 25, 36 190, 144, from(rgba(51, 88, 144, 0.99)), to(rgba(51, 88, 144, 0.99))), -webkit-gradient(radial, -10 72, 10, 310 -72, 72, from(rgba(54, 93, 152, 0.99)), to(rgba(54, 93, 152, 0.99))), -webkit-gradient(radial, 72 72, 20, -275 -72, 72, from(rgba(54, 93, 152, 0.99)), to(rgba(54, 93, 152, 0.99))) rgba(61, 105, 171, 0.99) !important;
  background: no-repeat url('http://vsxed.github.com/Social-Slides/sprite.png') 0 -47px;
}
.social-share.tw {
  background: -webkit-gradient(radial, 37 56, 25, 36 1, 144, from(rgba(56, 168, 186, 0.99)), to(rgba(56, 168, 186, 0.99))), -webkit-gradient(radial, -10 72, 10, 310 -72, 72, from(rgba(58, 175, 194, 0.99)), to(rgba(58, 175, 194, 0.99))), -webkit-gradient(radial, 72 72, 20, -275 -72, 72, from(rgba(58, 175, 194, 0.99)), to(rgba(58, 175, 194, 0.99))) rgba(76, 184, 201, 0.99) !important;
  background: no-repeat url('http://vsxed.github.com/Social-Slides/sprite.png') -73px -47px;
}
.social-share:hover > span {
  top: -29px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.social-share:hover > .cta {
  bottom: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.cta {
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  padding: 6px 0;
  text-align: center;
  width: 72px;
  position: absolute;
  border-radius: 0 0 6px 6px;
  bottom: -60px;
  display: block;
  box-shadow: inset 0 1px 0 0 #ffffff, 0 -1px 0 0 rgba(0, 0, 0, 0.3);
  background-color: #e8e8e8;
  background-image: -webkit-linear-gradient(top left, #e8e8e8, #ffffff);
  background-image: -moz-linear-gradient(top left, #e8e8e8, #ffffff);
  background-image: -ms-linear-gradient(top left, #e8e8e8, #ffffff);
  background-image: -o-linear-gradient(top left, #e8e8e8, #ffffff);
  background-image: linear-gradient(top left, #e8e8e8, #ffffff);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e8e8', endColorstr='#ffffff', GradientType=0);;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.cta.tw {
  color: rgba(58, 175, 194, 0.99);
}
.cta.fb {
  color: rgba(54, 93, 152, 0.99);
}