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

29/04/201502/05/2015 admin 0 Комментариев HTML/CSS, Web

Обмен статьями и контентом через социальные сети стал очень важным для успеха сайта с тех пор, как Google стал придавать значение социальным сигналам. Обмен является хорошим методом, чтобы увеличить трафик и рейтинг сайта. Простой способ добиться этого — это добавить на сайт кнопки социальных сетей. Вы можете использовать CSS3 кнопки социальных сетей, которые могут не только украсить ваш сайт, но и ускорить загрузку сайта, так как они загружаются гораздо быстрее чем изображения. Некоторые из приведённых ниже примеров содержат JQuery вместе со стандартным CSS.
See the Pen <a href="http://codepen.io/vavik96/pen/zGGvvo/">Social button</a> by vavik (<a href="http://codepen.io/vavik96">@vavik96</a>) on <a href="http://codepen.io">CodePen</a>.

Коллекция социальных кнопок

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

See the Pen <a href="http://codepen.io/markmurray/pen/JugrG/">Various Share Button Styles</a> by Mark Murray (<a href="http://codepen.io/markmurray">@markmurray</a>) on <a href="http://codepen.io">CodePen</a>.

Pure Social Buttons in css3

See the Pen <a href="http://codepen.io/Naymapl/pen/qEgXyG/">Social Icon by Nayma.pl</a> by Dariusz (<a href="http://codepen.io/Naymapl">@Naymapl</a>) on <a href="http://codepen.io">CodePen</a>.

Fancy Кнопки

Еще визуальное удовольствие для посетителей сайта, чтобы поделиться своим содержанием или закладки веб-сайт на их сроки.
See the Pen <a href="http://codepen.io/cguillou/pen/LmCuJ/">Fancy Flat Social Button Animation</a> by Clément Guillou (<a href="http://codepen.io/cguillou">@cguillou</a>) on <a href="http://codepen.io">CodePen</a>.

Hover Fancy

See the Pen <a href="http://codepen.io/shaman_tito/pen/jwdey/">jwdey</a> by Shaman Tito (<a href="http://codepen.io/shaman_tito">@shaman_tito</a>) on <a href="http://codepen.io">CodePen</a>.

Sexy Social Buttons

See the Pen <a href="http://codepen.io/minimalmonkey/pen/Ecpla/">Sexy Social Buttons</a> by Stephen Burgess (<a href="http://codepen.io/minimalmonkey">@minimalmonkey</a>) on <a href="http://codepen.io">CodePen</a>.

Social Buttons Slide

See the Pen <a href="http://codepen.io/kaypooma/pen/Acyrl/">Social Buttons</a> by Kay Pooma (<a href="http://codepen.io/kaypooma">@kaypooma</a>) on <a href="http://codepen.io">CodePen</a>.

Social Footer

See the Pen <a href="http://codepen.io/jamalAzmy/pen/Jytrv/">Social Footer</a> by jamal azmy (<a href="http://codepen.io/jamalAzmy">@jamalAzmy</a>) on <a href="http://codepen.io">CodePen</a>.

Social Section

See the Pen <a href="http://codepen.io/jonwelsh/pen/hHpiE/">Hover effect on social buttons</a> by Jon Welsh (<a href="http://codepen.io/jonwelsh">@jonwelsh</a>) on <a href="http://codepen.io">CodePen</a>.

Social Share

See the Pen <a href="http://codepen.io/chrisdothtml/pen/azPYqq/">Stylish Social Buttons</a> by Chris Deacy (<a href="http://codepen.io/chrisdothtml">@chrisdothtml</a>) on <a href="http://codepen.io">CodePen</a>.

Social Networks

See the Pen <a href="http://codepen.io/iloutzu/pen/uItdc/">Flat social buttons</a> by iloutzu (<a href="http://codepen.io/iloutzu">@iloutzu</a>) on <a href="http://codepen.io">CodePen</a>.

Circular Social Icons

See the Pen <a href="http://codepen.io/Louisacoma/pen/bfELh/">Social Buttons Slider</a> by Louisa Coma (<a href="http://codepen.io/Louisacoma">@Louisacoma</a>) on <a href="http://codepen.io">CodePen</a>.

Share Buttons

See the Pen <a href="http://codepen.io/markmurray/pen/hAsFa/">Flat Social Icons</a> by Mark Murray (<a href="http://codepen.io/markmurray">@markmurray</a>) on <a href="http://codepen.io">CodePen</a>.

Color Changing Social Bar

See the Pen <a href="http://codepen.io/EmmanuelB/pen/tFlvx/">Full CSS Social buttons</a> by Emmanuel B. (<a href="http://codepen.io/EmmanuelB">@EmmanuelB</a>) on <a href="http://codepen.io">CodePen</a>.

Flat Social Buttons in CSS3

See the Pen <a href="http://codepen.io/anampartho/pen/vEjpvM/">‘FLAT’ Beauty Social Button with css3 transition</a> by S.M.Tashrik Anam (<a href="http://codepen.io/anampartho">@anampartho</a>) on <a href="http://codepen.io">CodePen</a>.

CSS Social

See the Pen <a href='http://codepen.io/vavik96/pen/rVVqaP/'>css Social-Icons5</a> by vavik (<a href='http://codepen.io/vavik96'>@vavik96</a>) on <a href='http://codepen.io'>CodePen</a>. 
See the Pen <a href="http://codepen.io/Stanssongs/pen/GgvbD/">CSS social buttons and icons</a> by Stan Williams (<a href="http://codepen.io/Stanssongs">@Stanssongs</a>) on <a href="http://codepen.io">CodePen</a>.

Social Navigation

See the Pen <a href="http://codepen.io/mnafricano/pen/IGoDe/">Simplistic CSS Social Buttons</a> by Marcello Africano (<a href="http://codepen.io/mnafricano">@mnafricano</a>) on <a href="http://codepen.io">CodePen</a>. 
See the Pen <a href="http://codepen.io/mehmetklctas/pen/eshdr/">Full Sosyal Buton Kullandığım</a> by Mehmet (<a href="http://codepen.io/mehmetklctas">@mehmetklctas</a>) on <a href="http://codepen.io">CodePen</a>. 
See the Pen <a href='http://codepen.io/vavik96/pen/OVVBNj/'>Social button2</a> by vavik (<a href='http://codepen.io/vavik96'>@vavik96</a>) on <a href='http://codepen.io'>CodePen</a>.

Vavik96

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

Коллекция социальных кнопок

Pure Social Buttons in css3

Fancy Кнопки

Hover Fancy

Sexy Social Buttons

Social Buttons Slide

Social Footer

Social Section

Social Share

Social Networks

Circular Social Icons

Share Buttons

Color Changing Social Bar

Flat Social Buttons in CSS3

CSS Social

Social Navigation

Добавить комментарий Отменить ответ

Коллекция социальных кнопок

Pure Social Buttons in css3

Fancy Кнопки

Hover Fancy

Sexy Social Buttons

Social Buttons Slide

Social Footer

Social Section

Social Share

Social Networks

Circular Social Icons

Share Buttons

Color Changing Social Bar

Flat Social Buttons in CSS3

CSS Social

Social Navigation

Вам также может понравиться

3d Слайдеры

15 сервисов конвертации из PSD в HTML

META – теги: описание и правила создания

Добавить комментарий Отменить ответ