Социальные кнопки на CSS

Социальные кнопки на CSS

04.10.201223241

Этот набор кнопок имеет эффект 3D. Используйте их для оформления кнопок «Поделиться» на странице новостей своего сайта. Кнопки большие, это лишь значит, что они будут заметными, и соответственно нажимать на них будут больше. Нужно учитывать, что это только стили, которые украсят социальные кнопки. Заставить их работать – это уже ваша задача, Вы можете дать работу фрилансеру, он сможет сделать эти кнопки работоспособными. Платить много за такую работу не следует, т.к. это не сложно.

Проверено в браузерах Firefox 4, Safari 4, Google Chrome 14, Opera 10 и Internet Explorer 8.


Код HTML



Code
<section class="container">
  <a href="https://twitter.com/intent/tweet?url=http%3A%2F%2Fyraaa.ru%2F&via=WebInterfaceLab&text=CSS3%20snippet%3A%20share%20buttons" class="share-btn" target="_blank">
  <span class="share-btn-action share-btn-tweet">Tweet</span>
  <span class="share-btn-count">481</span>
  </a>
  <a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fyraaa.ru%2F" class="share-btn" target="_blank">
  <span class="share-btn-action share-btn-like">Like</span>
  <span class="share-btn-count">516</span>
  </a>
  <a href="https://plus.google.com/share?url=http%3A%2F%2Fyraaa.ru%2F" class="share-btn" target="_blank">
  <span class="share-btn-action share-btn-plus">+1</span>
  <span class="share-btn-count">234</span>
  </a>
  </section>

Код CSS



Code
.container {
  margin: 80px auto;
  width: 400px;
  text-align: center;
}

.share-btn {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 0 20px;
  padding-top: 40px;
  width: 80px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.share-btn:active {
  margin-top: 3px;
}
.share-btn:active .share-btn-action {
  padding-bottom: 3px;
  -webkit-box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
}
.share-btn:active .share-btn-action:after {
  bottom: 3px;
}

.share-btn-count {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  line-height: 40px;
  font-size: 19px;
  letter-spacing: -1px;
  color: #555;
  text-shadow: 0 1px white;
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: #c5c5c5 #bbb;
  border-radius: 8px 8px 0 0;
  background-color: #e6eff5;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.03)), color-stop(40%, transparent));
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
  background-image: linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
}
.share-btn-count:before, .share-btn-count:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: #e6eff5;
}
.share-btn-count:before {
  border-width: 7px;
  border-top-color: rgba(0, 0, 0, 0.07);
  margin-left: -7px;
  margin-top: 1px;
}

.share-btn-action {
  position: relative;
  display: block;
  line-height: 32px;
  padding: 2px 0 6px;
  font-size: 12px;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  border: solid rgba(0, 0, 0, 0.18);
  border-width: 0 1px;
  border-radius: 0 0 8px 8px;
}
.share-btn-action:before {
  content: '';
  display: inline-block;
  vertical-align: top;
  margin: 8px 2px 0 0;
  width: 18px;
  height: 18px;
  background-image: url("../img/icons.png");
}
.share-btn-action:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 6px;
  left: 0;
  right: 0;
  border-radius: 0 0 6px 6px;
  -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
}

.share-btn-tweet {
  background-color: #83cfe8;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #83cfe8), color-stop(100%, #6ebbd4));
  background-image: -webkit-linear-gradient(top, #83cfe8, #6ebbd4);
  background-image: -moz-linear-gradient(top, #83cfe8, #6ebbd4);
  background-image: -ms-linear-gradient(top, #83cfe8, #6ebbd4);
  background-image: -o-linear-gradient(top, #83cfe8, #6ebbd4);
  background-image: linear-gradient(top, #83cfe8, #6ebbd4);
  -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
}
.share-btn-tweet:before {
  margin-left: -3px;
}
.share-btn-tweet:after {
  -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
}
.share-btn-tweet + .share-btn-count {
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
}
.share-btn-tweet + .share-btn-count:before {
  border-top-color: rgba(0, 0, 0, 0.05);
}

.share-btn-like {
  background-color: #6480bd;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6480bd), color-stop(100%, #3c5894));
  background-image: -webkit-linear-gradient(top, #6480bd, #3c5894);
  background-image: -moz-linear-gradient(top, #6480bd, #3c5894);
  background-image: -ms-linear-gradient(top, #6480bd, #3c5894);
  background-image: -o-linear-gradient(top, #6480bd, #3c5894);
  background-image: linear-gradient(top, #6480bd, #3c5894);
  -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
}
.share-btn-like:before {
  background-position: -18px 0;
}

.share-btn-plus {
  background-color: #626262;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #626262), color-stop(100%, #404040));
  background-image: -webkit-linear-gradient(top, #626262, #404040);
  background-image: -moz-linear-gradient(top, #626262, #404040);
  background-image: -ms-linear-gradient(top, #626262, #404040);
  background-image: -o-linear-gradient(top, #626262, #404040);
  background-image: linear-gradient(top, #626262, #404040);
  -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
}
.share-btn-plus:before {
  display: none;
}



Сохраните в социальную сеть
Комментарии (1)
Ух ты, классно!
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт