Автор

Кнопки социальных сетей для сайта на 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%);
}

 

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

 

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


vk.com/club.ssdru

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



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

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

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


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

И снова параллакс на jQuery, но довольно-таки интересный вариант и я думаю многие захотят на своем сайте иметь чтото подобное, так как практически это многослойный параллакс эффект, просто посмотрите демо и всё станет ясно!


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

Вот и наступила зима, выпал первый снег, и по настоящему чувствуется что скоро наступит новый год, ведь новогоднее настроение уже парит в воздухе. Люди во всю наряжают елки, а веб-мастера стараются украсить свой сайт новогодними украшениями. В данном уроке мы рассмотрим как создать простой эффект снега для сайта при этом мы будем использовать правила JS и немного новогодней магии. У нас будет рондомное падение снега, при этом мы добавим плавности, кроме этого мы добавили эффект глубины с помощью больших и меньших окружностей снежинок.


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

В этом учебнике по HTML 5 и CSS 3 расскрываются стандарты нового  поколения разработки веб приложений на простых и работающих примерах. В наше время основные браузеры и мобильные устройства поддерживают спецификации HTML 5 и CSS 3. Эти новейшие технологии это основа последующего поколения интернет-разработок. Преимущества технологий нового поколения явны: удобство и комфорт для пользователя, для программиста - простота и удобства.


75 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close