Автор

Кнопки социальных сетей для сайта на CSS3

Кнопки социальных сетей для сайта на CSS3


 

Мы уже не раз рассказывали о важности интеграции социальных сетей на вашем сайте. Они позволят не только увеличить оборот посетителей но и привлечь постоянных читателей сайта, что соответственно увеличит ядро аудитории. В сегодняшнем уроке мы рассмотрим как создать достаточно простые но привлекательные социальные кнопки для сайта, для этого мы будем использовать только CSS, что значительно ускорит загрузку страницы.

 

ДЕМО
ИСХОДНИКИ

 

В демонстрации мы рассмотрим кнопки для трех основных соц. сетей, а именно: фейсбук, твиттер и набирающая оборотов сеть google+, к каждой их этих социальных кнопок будут предложены три различных цветовых решений. Если Вам необходима красивая анимация, то закройте этот урок сразу, в данном уроке мы рассмотрим минимализм и скорость загрузки. И так, давайте приступим.

 

Шаг 1. HTML

 

<div class='section'>
 <div class='inner'>
 <a class='btn fb'>
 login
 <span>
 with facebook
 </span>
 </a>
 <a class='btn tw'>
 login
 <span>
 with twitter
 </span>
 </a>
 <a class='btn gp'>
 login
 <span>
 with google+
 </span>
 </a>
 </div>
</div>
<div class='section'>
 <div class='inner'>
 <a class='btn fb reverse'>
 login
 <span>
 with facebook
 </span>
 </a>
 <a class='btn tw reverse'>
 login
 <span>
 with twitter
 </span>
 </a>
 <a class='btn gp reverse'>
 login
 <span>
 with google+
 </span>
 </a>
 </div>
</div>
<div class='section'>
 <div class='inner'>
 <a class='btn fb naked'>
 login
 <span>
 with facebook
 </span>
 </a>
 <a class='btn tw naked'>
 login
 <span>
 with twitter
 </span>
 </a>
 <a class='btn gp naked'>
 login
 <span>
 with google+
 </span>
 </a>
 </div>
</div>

 

С разметкой у вас не должно возникнуть проблем, у нас есть спаны с помещенным в них текстом, кроме этого у нас имеются классы, с присвоенными соответствующими стилями для каждой кнопки.

 

Шаг 2. CSS

 

$btn: #fff;
$fb: #47c;
$tw: #0cf;
$gp: #d43;
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
:before, :after {
 content: '';
 display: block;
 position: absolute;
 box-sizing: border-box;
}
html, body {
 height: 100%;
 background: #ddd;
}
.inner {
 width: 780px;
 margin: 0 auto;
}
.inner a {
 float: left;
 margin: 45px 25px 0;
}
.btn {
 position: relative;
 display: block;
 width: 210px;
 height: 40px;
 padding: 0 0 0 55px;
 font: 700 16px/40px 'Quattrocento Sans', sans-serif;
 text-decoration: none;
 text-transform: uppercase;
 color: #555;
 border-radius: 2px;
 background: linear-gradient(to bottom, $btn 0%, darken($btn, 10%) 100%);
 box-shadow: 0 1px 1px rgba(0,0,0,.5);
 cursor: pointer;
}
.btn span {
 font-size: 14px;
 text-transform: none;
 color: #aaa;
}
.btn:before {
 top: 0;
 left: 0;
 width: 40px;
 height: 40px;
 font: 20px/40px entypo;
 text-align: center;
 color: #fff;
 border-radius: 2px 0 0 2px;
}
.btn.fb:before {
 content: '\f30c';
 background: linear-gradient(to bottom, $fb 0%, darken($fb, 10%) 100%);
}
.btn.tw:before {
 content: '\f309';
 background: linear-gradient(to bottom, $tw 0%, darken($tw, 10%) 100%);
}
.btn.gp:before {
 content: '\f30f';
 background: linear-gradient(to bottom, $gp 0%, darken($gp, 10%) 100%);
}
.btn:hover {
 text-shadow: 0 0 10px #fff;
}
/* reverse */
.btn.reverse {
 color: #fff;
}
.btn.reverse span {
 color: #eee;
}
.btn.fb.reverse {
 background: linear-gradient(to bottom, $fb 0%, darken($fb, 10%) 100%);
}
.btn.tw.reverse {
 background: linear-gradient(to bottom, $tw 0%, darken($tw, 10%) 100%);
}
.btn.gp.reverse {
 background: linear-gradient(to bottom, $gp 0%, darken($gp, 10%) 100%);
}
.btn.reverse:before {
 color: #555;
 background: linear-gradient(to bottom, $btn 0%, darken($btn, 10%) 100%);
}
/* naked */
.btn.naked:before {
 border-right: 1px solid #aaa;
 background: none;
}
.btn.fb.naked:before {
 color: darken($fb, 5%);
}
.btn.tw.naked:before {
 color: darken($tw, 5%);
}
.btn.gp.naked:before {
 color: darken($gp, 5%);
}

 

Вот и все. Готово!

 

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеCSS3

Кнопки социальных сетей для сайта на CSS3

Удобный фрагмент, позволяющий пользователям настраивать продукт непосредственно из галереи продуктов и добавлять его в корзину.


Кнопки социальных сетей для сайта на CSS3

Прогресс веб-дизайна не стоит на месте,большие гиганты ит-индустрии диктуют нам правила и направления в разработке дизайна, совсем недавно все стали переводить свои дизайны в минимализм, а именно в тренд Metro UI, объемные сайты постепенно стали исчезать ведь им производят рестайлинг, в скором времени будем на них любоваться как на динозавров. Буквально за несколько недель, с момента показа новой iOS 7, произошел легкий сдвиг в сознании не только у дизайнеров, но и у пользователей, имя ему — плоский дизайн.


Кнопки социальных сетей для сайта на CSS3

Как установить кнопки социальных сетей для своего сайта или как добавить блок с кнопками социальных сетей — тема данного урока. Я постараюсь дать вам информацию о самых популярных способах размещения кнопок.

Размещение кнопок социальных сетей на сайте при помощи официальных виджетов:

Кнопка Вконтакте- Мне нравится
Кнопка FaceBook — Like
Кнопка Twitter — Твитнуть
Кнопка Одноклассники — Класс
Кнопка Google — Plus 1


Кнопки социальных сетей для сайта на CSS3

Как часто вы замечали так называемые "вееры" с выбором цвета, или прочей информацией с магазинах. Это достаточно удобный подход, для экономии места, при этом предоставляется возможность хранить множество информации в достаточно малом объеме места. В данном уроке мы рассмотрим пример создания такой книжки образцов для сайта с помощью jquery и css3, в которой панели воспринимают нажатия кнопки мыши, после чего происходит открытие нужной страницы. В демонстрации приводится несколько примеров организации книги.


Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close