469 lines
20 KiB
HTML
469 lines
20 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<title>Demo: CSS Social Buttons</title>
|
|
|
|
<link href="social-buttons.css" rel="stylesheet">
|
|
|
|
<style type="text/css">
|
|
body {
|
|
background: #fff;
|
|
font: 14px/140% Arial, Helvetica, sans-serif;
|
|
color: #666;
|
|
width: 800px;
|
|
max-width: 80%;
|
|
margin: 30px auto;
|
|
}
|
|
p {
|
|
margin: 0 0 15px;
|
|
}
|
|
a {
|
|
color: #669;
|
|
text-decoration: none;
|
|
}
|
|
h1, h2, h3 {
|
|
color: #000;
|
|
}
|
|
h2, h3 {
|
|
line-height: 110%;
|
|
}
|
|
h2 {
|
|
font-size: 18px;
|
|
margin: 30px 0 15px;
|
|
}
|
|
h3 {
|
|
margin: 20px 0 10px;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
color: #999;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1>Demo: CSS Social Buttons</h1>
|
|
<p>by <a href="http://twitter.com/nickla">@nickla</a>, <a href="http://webdesignerwall.com">Web Designer Wall</a> (read <a href="http://webdesignerwall.com/tutorials/css-social-buttons">related article</a>)</p>
|
|
|
|
<h2>Default</h2>
|
|
<p>
|
|
<a href="#" class="sb twitter">Twitter</a>
|
|
<a href="#" class="sb facebook">Facebook</a>
|
|
<a href="#" class="sb heart">Heart</a>
|
|
<a href="#" class="sb linkedin">LinkedIn</a>
|
|
<a href="#" class="sb pinterest">Pinterest</a>
|
|
<a href="#" class="sb podcast">Podcast</a>
|
|
<a href="#" class="sb rss">RSS</a>
|
|
<a href="#" class="sb share_this">Share</a>
|
|
<a href="#" class="sb star">Star</a>
|
|
<a href="#" class="sb vimeo">Vimeo</a>
|
|
</p>
|
|
|
|
<h2>Sizes</h2>
|
|
|
|
<h3>small, default, large</h3>
|
|
<p>
|
|
<a href="#" class="sb small twitter">Twitter</a>
|
|
<a href="#" class="sb twitter">Twitter</a>
|
|
<a href="#" class="sb large twitter">Twitter</a>
|
|
<a href="#" class="sb small facebook">Twitter</a>
|
|
<a href="#" class="sb facebook">Twitter</a>
|
|
<a href="#" class="sb large facebook">Twitter</a>
|
|
<a href="#" class="sb small pinterest">Twitter</a>
|
|
<a href="#" class="sb pinterest">Twitter</a>
|
|
<a href="#" class="sb large pinterest">Twitter</a>
|
|
</p>
|
|
|
|
<h2>Styles</h2>
|
|
|
|
<h3>min</h3>
|
|
<p>
|
|
<a href="#" class="sb min twitter">Twitter</a>
|
|
<a href="#" class="sb min facebook">Facebook</a>
|
|
<a href="#" class="sb min heart">Heart</a>
|
|
<a href="#" class="sb min linkedin">LinkedIn</a>
|
|
<a href="#" class="sb min pinterest">Pinterest</a>
|
|
<a href="#" class="sb min podcast">Podcast</a>
|
|
<a href="#" class="sb min rss">RSS</a>
|
|
<a href="#" class="sb min share_this">Share</a>
|
|
<a href="#" class="sb min star">Star</a>
|
|
<a href="#" class="sb min vimeo">Vimeo</a>
|
|
</p>
|
|
|
|
<h3>flat</h3>
|
|
<p>
|
|
<a href="#" class="sb flat twitter">Twitter</a>
|
|
<a href="#" class="sb flat facebook">Facebook</a>
|
|
<a href="#" class="sb flat heart">Heart</a>
|
|
<a href="#" class="sb flat linkedin">LinkedIn</a>
|
|
<a href="#" class="sb flat pinterest">Pinterest</a>
|
|
<a href="#" class="sb flat podcast">Podcast</a>
|
|
<a href="#" class="sb flat rss">RSS</a>
|
|
<a href="#" class="sb flat share_this">Share</a>
|
|
<a href="#" class="sb flat star">Star</a>
|
|
<a href="#" class="sb flat vimeo">Vimeo</a>
|
|
</p>
|
|
|
|
<h3>cicle</h3>
|
|
<p>
|
|
<a href="#" class="sb circle twitter">Twitter</a>
|
|
<a href="#" class="sb circle facebook">Facebook</a>
|
|
<a href="#" class="sb circle heart">Heart</a>
|
|
<a href="#" class="sb circle linkedin">LinkedIn</a>
|
|
<a href="#" class="sb circle pinterest">Pinterest</a>
|
|
<a href="#" class="sb circle podcast">Podcast</a>
|
|
<a href="#" class="sb circle rss">RSS</a>
|
|
<a href="#" class="sb circle share_this">Share</a>
|
|
<a href="#" class="sb circle star">Star</a>
|
|
<a href="#" class="sb circle vimeo">Vimeo</a>
|
|
</p>
|
|
|
|
<h3>embossed</h3>
|
|
<p>
|
|
<a href="#" class="sb embossed twitter">Twitter</a>
|
|
<a href="#" class="sb embossed facebook">Facebook</a>
|
|
<a href="#" class="sb embossed heart">Heart</a>
|
|
<a href="#" class="sb embossed linkedin">LinkedIn</a>
|
|
<a href="#" class="sb embossed pinterest">Pinterest</a>
|
|
<a href="#" class="sb embossed podcast">Podcast</a>
|
|
<a href="#" class="sb embossed rss">RSS</a>
|
|
<a href="#" class="sb embossed share_this">Share</a>
|
|
<a href="#" class="sb embossed star">Star</a>
|
|
<a href="#" class="sb embossed vimeo">Vimeo</a>
|
|
</p>
|
|
|
|
<h3>pressed</h3>
|
|
<p>
|
|
<a href="#" class="sb pressed twitter">Twitter</a>
|
|
<a href="#" class="sb pressed facebook">Facebook</a>
|
|
<a href="#" class="sb pressed heart">Heart</a>
|
|
<a href="#" class="sb pressed linkedin">LinkedIn</a>
|
|
<a href="#" class="sb pressed pinterest">Pinterest</a>
|
|
<a href="#" class="sb pressed podcast">Podcast</a>
|
|
<a href="#" class="sb pressed rss">RSS</a>
|
|
<a href="#" class="sb pressed share_this">Share</a>
|
|
<a href="#" class="sb pressed star">Star</a>
|
|
<a href="#" class="sb pressed vimeo">Vimeo</a>
|
|
</p>
|
|
|
|
<h3>thick-border</h3>
|
|
<p>
|
|
<a href="#" class="sb thick-border twitter">Twitter</a>
|
|
<a href="#" class="sb thick-border facebook">Facebook</a>
|
|
<a href="#" class="sb thick-border heart">Heart</a>
|
|
<a href="#" class="sb thick-border linkedin">LinkedIn</a>
|
|
<a href="#" class="sb thick-border pinterest">Pinterest</a>
|
|
<a href="#" class="sb thick-border podcast">Podcast</a>
|
|
<a href="#" class="sb thick-border rss">RSS</a>
|
|
<a href="#" class="sb thick-border share_this">Share</a>
|
|
<a href="#" class="sb thick-border star">Star</a>
|
|
<a href="#" class="sb thick-border vimeo">Vimeo</a>
|
|
</p>
|
|
|
|
<h3>no-border</h3>
|
|
<p>
|
|
<a href="#" class="sb no-border twitter">Twitter</a>
|
|
<a href="#" class="sb no-border facebook">Facebook</a>
|
|
<a href="#" class="sb no-border heart">Heart</a>
|
|
<a href="#" class="sb no-border linkedin">LinkedIn</a>
|
|
<a href="#" class="sb no-border pinterest">Pinterest</a>
|
|
<a href="#" class="sb no-border podcast">Podcast</a>
|
|
<a href="#" class="sb no-border rss">RSS</a>
|
|
<a href="#" class="sb no-border share_this">Share</a>
|
|
<a href="#" class="sb no-border star">Star</a>
|
|
<a href="#" class="sb no-border vimeo">Vimeo</a>
|
|
</p>
|
|
|
|
<h3>no-shadow</h3>
|
|
<p>
|
|
<a href="#" class="sb no-shadow twitter">Twitter</a>
|
|
<a href="#" class="sb no-shadow facebook">Facebook</a>
|
|
<a href="#" class="sb no-shadow heart">Heart</a>
|
|
<a href="#" class="sb no-shadow linkedin">LinkedIn</a>
|
|
<a href="#" class="sb no-shadow pinterest">Pinterest</a>
|
|
<a href="#" class="sb no-shadow podcast">Podcast</a>
|
|
<a href="#" class="sb no-shadow rss">RSS</a>
|
|
<a href="#" class="sb no-shadow share_this">Share</a>
|
|
<a href="#" class="sb no-shadow star">Star</a>
|
|
<a href="#" class="sb no-shadow vimeo">Vimeo</a>
|
|
</p>
|
|
|
|
<h3>gradient</h3>
|
|
<p>
|
|
<a href="#" class="sb gradient twitter">Twitter</a>
|
|
<a href="#" class="sb gradient facebook">Facebook</a>
|
|
<a href="#" class="sb gradient heart">Heart</a>
|
|
<a href="#" class="sb gradient linkedin">LinkedIn</a>
|
|
<a href="#" class="sb gradient pinterest">Pinterest</a>
|
|
<a href="#" class="sb gradient podcast">Podcast</a>
|
|
<a href="#" class="sb gradient rss">RSS</a>
|
|
<a href="#" class="sb gradient share_this">Share</a>
|
|
<a href="#" class="sb gradient star">Star</a>
|
|
<a href="#" class="sb gradient vimeo">Vimeo</a>
|
|
</p>
|
|
|
|
<h3>glossy</h3>
|
|
<p>
|
|
<a href="#" class="sb glossy gray twitter">Twitter</a>
|
|
<a href="#" class="sb glossy gray facebook">Facebook</a>
|
|
<a href="#" class="sb glossy gray heart">Heart</a>
|
|
<a href="#" class="sb glossy gray linkedin">LinkedIn</a>
|
|
<a href="#" class="sb glossy gray pinterest">Pinterest</a>
|
|
<a href="#" class="sb glossy gray podcast">Podcast</a>
|
|
<a href="#" class="sb glossy gray rss">RSS</a>
|
|
<a href="#" class="sb glossy gray share_this">Share</a>
|
|
<a href="#" class="sb glossy gray star">Star</a>
|
|
<a href="#" class="sb glossy gray vimeo">Vimeo</a>
|
|
</p>
|
|
|
|
<h3>text</h3>
|
|
<p>
|
|
<a href="#" class="sb text twitter">Twitter</a>
|
|
<a href="#" class="sb text facebook">Facebook</a>
|
|
<a href="#" class="sb text heart">Heart</a>
|
|
<a href="#" class="sb text linkedin">LinkedIn</a>
|
|
<a href="#" class="sb text pinterest">Pinterest</a>
|
|
<a href="#" class="sb text podcast">Podcast</a>
|
|
<a href="#" class="sb text rss">RSS</a>
|
|
<a href="#" class="sb text share_this">Share</a>
|
|
<a href="#" class="sb text star">Star</a>
|
|
<a href="#" class="sb text vimeo">Vimeo</a>
|
|
</p>
|
|
|
|
<h2>Colors + Styles</h2>
|
|
|
|
<h3>default</h3>
|
|
<p>
|
|
<a href="#" class="sb twitter">Twitter</a>
|
|
<a href="#" class="sb blue twitter">Twitter</a>
|
|
<a href="#" class="sb purple twitter">Twitter</a>
|
|
<a href="#" class="sb red twitter">Twitter</a>
|
|
<a href="#" class="sb green twitter">Twitter</a>
|
|
<a href="#" class="sb orange twitter">Twitter</a>
|
|
<a href="#" class="sb brown twitter">Twitter</a>
|
|
<a href="#" class="sb black twitter">Twitter</a>
|
|
<a href="#" class="sb gray twitter">Twitter</a>
|
|
<a href="#" class="sb light-gray twitter">Twitter</a>
|
|
<a href="#" class="sb light-blue twitter">Twitter</a>
|
|
<a href="#" class="sb light-purple twitter">Twitter</a>
|
|
<a href="#" class="sb pink twitter">Twitter</a>
|
|
<a href="#" class="sb light-green twitter">Twitter</a>
|
|
<a href="#" class="sb yellow twitter">Twitter</a>
|
|
</p>
|
|
|
|
<h3>flat</h3>
|
|
<p>
|
|
<a href="#" class="sb flat twitter">Twitter</a>
|
|
<a href="#" class="sb flat blue twitter">Twitter</a>
|
|
<a href="#" class="sb flat purple twitter">Twitter</a>
|
|
<a href="#" class="sb flat red twitter">Twitter</a>
|
|
<a href="#" class="sb flat green twitter">Twitter</a>
|
|
<a href="#" class="sb flat orange twitter">Twitter</a>
|
|
<a href="#" class="sb flat brown twitter">Twitter</a>
|
|
<a href="#" class="sb flat black twitter">Twitter</a>
|
|
<a href="#" class="sb flat gray twitter">Twitter</a>
|
|
<a href="#" class="sb flat light-gray twitter">Twitter</a>
|
|
<a href="#" class="sb flat light-blue twitter">Twitter</a>
|
|
<a href="#" class="sb flat light-purple twitter">Twitter</a>
|
|
<a href="#" class="sb flat pink twitter">Twitter</a>
|
|
<a href="#" class="sb flat light-green twitter">Twitter</a>
|
|
<a href="#" class="sb flat yellow twitter">Twitter</a>
|
|
</p>
|
|
|
|
<h3>gradient</h3>
|
|
<p>
|
|
<a href="#" class="sb gradient twitter">Twitter</a>
|
|
<a href="#" class="sb gradient blue twitter">Twitter</a>
|
|
<a href="#" class="sb gradient purple twitter">Twitter</a>
|
|
<a href="#" class="sb gradient red twitter">Twitter</a>
|
|
<a href="#" class="sb gradient green twitter">Twitter</a>
|
|
<a href="#" class="sb gradient orange twitter">Twitter</a>
|
|
<a href="#" class="sb gradient brown twitter">Twitter</a>
|
|
<a href="#" class="sb gradient black twitter">Twitter</a>
|
|
<a href="#" class="sb gradient gray twitter">Twitter</a>
|
|
<a href="#" class="sb gradient light-gray twitter">Twitter</a>
|
|
<a href="#" class="sb gradient light-blue twitter">Twitter</a>
|
|
<a href="#" class="sb gradient light-purple twitter">Twitter</a>
|
|
<a href="#" class="sb gradient pink twitter">Twitter</a>
|
|
<a href="#" class="sb gradient light-green twitter">Twitter</a>
|
|
<a href="#" class="sb gradient yellow twitter">Twitter</a>
|
|
</p>
|
|
|
|
<h3>gradient + glossy</h3>
|
|
<p>
|
|
<a href="#" class="sb gradient glossy twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy blue twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy purple twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy red twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy green twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy orange twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy brown twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy black twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy gray twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy light-gray twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy light-blue twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy light-purple twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy pink twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy light-green twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy yellow twitter">Twitter</a>
|
|
</p>
|
|
|
|
<h3>gradient + glossy + embossed</h3>
|
|
<p>
|
|
<a href="#" class="sb gradient glossy embossed twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy embossed blue twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy embossed purple twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy embossed red twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy embossed green twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy embossed orange twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy embossed brown twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy embossed black twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy embossed gray twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy embossed light-gray twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy embossed light-blue twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy embossed light-purple twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy embossed pink twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy embossed light-green twitter">Twitter</a>
|
|
<a href="#" class="sb gradient glossy embossed yellow twitter">Twitter</a>
|
|
</p>
|
|
|
|
<h3>circle + gradient + glossy + embossed</h3>
|
|
<p>
|
|
<a href="#" class="sb circle gradient glossy embossed twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy embossed blue twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy embossed purple twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy embossed red twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy embossed green twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy embossed orange twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy embossed brown twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy embossed black twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy embossed gray twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy embossed light-gray twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy embossed light-blue twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy embossed light-purple twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy embossed pink twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy embossed light-green twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy embossed yellow twitter">Twitter</a>
|
|
</p>
|
|
|
|
<h3>circle + no-border + no-shadow</h3>
|
|
<p>
|
|
<a href="#" class="sb circle no-shadow no-border twitter">Twitter</a>
|
|
<a href="#" class="sb circle no-shadow no-border blue twitter">Twitter</a>
|
|
<a href="#" class="sb circle no-shadow no-border purple twitter">Twitter</a>
|
|
<a href="#" class="sb circle no-shadow no-border red twitter">Twitter</a>
|
|
<a href="#" class="sb circle no-shadow no-border green twitter">Twitter</a>
|
|
<a href="#" class="sb circle no-shadow no-border orange twitter">Twitter</a>
|
|
<a href="#" class="sb circle no-shadow no-border brown twitter">Twitter</a>
|
|
<a href="#" class="sb circle no-shadow no-border black twitter">Twitter</a>
|
|
<a href="#" class="sb circle no-shadow no-border gray twitter">Twitter</a>
|
|
<a href="#" class="sb circle no-shadow no-border light-gray twitter">Twitter</a>
|
|
<a href="#" class="sb circle no-shadow no-border light-blue twitter">Twitter</a>
|
|
<a href="#" class="sb circle no-shadow no-border light-purple twitter">Twitter</a>
|
|
<a href="#" class="sb circle no-shadow no-border pink twitter">Twitter</a>
|
|
<a href="#" class="sb circle no-shadow no-border light-green twitter">Twitter</a>
|
|
<a href="#" class="sb circle no-shadow no-border yellow twitter">Twitter</a>
|
|
</p>
|
|
|
|
<h3>flat + text</h3>
|
|
<p>
|
|
<a href="#" class="sb flat text twitter">Twitter</a>
|
|
<a href="#" class="sb flat text blue twitter">Twitter</a>
|
|
<a href="#" class="sb flat text purple twitter">Twitter</a>
|
|
<a href="#" class="sb flat text red twitter">Twitter</a>
|
|
<a href="#" class="sb flat text green twitter">Twitter</a>
|
|
<a href="#" class="sb flat text orange twitter">Twitter</a>
|
|
<a href="#" class="sb flat text brown twitter">Twitter</a>
|
|
<a href="#" class="sb flat text black twitter">Twitter</a>
|
|
<a href="#" class="sb flat text gray twitter">Twitter</a>
|
|
<a href="#" class="sb flat text light-gray twitter">Twitter</a>
|
|
<a href="#" class="sb flat text light-blue twitter">Twitter</a>
|
|
<a href="#" class="sb flat text light-purple twitter">Twitter</a>
|
|
<a href="#" class="sb flat text pink twitter">Twitter</a>
|
|
<a href="#" class="sb flat text light-green twitter">Twitter</a>
|
|
<a href="#" class="sb flat text yellow twitter">Twitter</a>
|
|
</p>
|
|
|
|
<h3>circle + text + thick-border</h3>
|
|
<p>
|
|
<a href="#" class="sb circle text thick-border twitter">Twitter</a>
|
|
<a href="#" class="sb circle text thick-border blue twitter">Twitter</a>
|
|
<a href="#" class="sb circle text thick-border purple twitter">Twitter</a>
|
|
<a href="#" class="sb circle text thick-border red twitter">Twitter</a>
|
|
<a href="#" class="sb circle text thick-border green twitter">Twitter</a>
|
|
<a href="#" class="sb circle text thick-border orange twitter">Twitter</a>
|
|
<a href="#" class="sb circle text thick-border brown twitter">Twitter</a>
|
|
<a href="#" class="sb circle text thick-border black twitter">Twitter</a>
|
|
<a href="#" class="sb circle text thick-border gray twitter">Twitter</a>
|
|
<a href="#" class="sb circle text thick-border light-gray twitter">Twitter</a>
|
|
<a href="#" class="sb circle text thick-border light-blue twitter">Twitter</a>
|
|
<a href="#" class="sb circle text thick-border light-purple twitter">Twitter</a>
|
|
<a href="#" class="sb circle text thick-border pink twitter">Twitter</a>
|
|
<a href="#" class="sb circle text thick-border light-green twitter">Twitter</a>
|
|
<a href="#" class="sb circle text thick-border yellow twitter">Twitter</a>
|
|
</p>
|
|
|
|
<h3>circle + gradient + glossy + text + embossed</h3>
|
|
<p>
|
|
<a href="#" class="sb circle gradient glossy text embossed twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy text embossed blue twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy text embossed purple twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy text embossed red twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy text embossed green twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy text embossed orange twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy text embossed brown twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy text embossed black twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy text embossed gray twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy text embossed light-gray twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy text embossed light-blue twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy text embossed light-purple twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy text embossed pink twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy text embossed light-green twitter">Twitter</a>
|
|
<a href="#" class="sb circle gradient glossy text embossed yellow twitter">Twitter</a>
|
|
</p>
|
|
|
|
<h3>mix and match</h3>
|
|
<p>
|
|
<a href="#" class="sb min twitter">Twitter</a>
|
|
<a href="#" class="sb small text min facebook">Facebook</a>
|
|
<a href="#" class="sb small blue facebook">Facebook</a>
|
|
<a href="#" class="sb large red embossed heart">Heart</a>
|
|
<a href="#" class="sb text embossed linkedin">LinkedIn</a>
|
|
<a href="#" class="sb yellow gradient embossed pinterest">Pinterest</a>
|
|
<a href="#" class="sb circle large embossed purple gradient podcast">Podcast</a>
|
|
<a href="#" class="sb orange glossy rss">RSS</a>
|
|
<a href="#" class="sb embossed green large text share_this">Share</a>
|
|
<a href="#" class="sb orange flat small star">Star</a>
|
|
<a href="#" class="sb pressed no-border blue large vimeo">Vimeo</a>
|
|
<a href="#" class="sb thick-border light-gray large twitter">Twitter</a>
|
|
<a href="#" class="sb text red large gradient glossy embossed circle heart">Heart</a>
|
|
<a href="#" class="sb flat small text rss light-blue">RSS</a>
|
|
<a href="#" class="sb orange gradient text circle vimeo">Vimeo</a>
|
|
<a href="#" class="sb black glossy text flat vimeo">Vimeo</a>
|
|
<a href="#" class="sb blue circle no-border twitter">Twitter</a>
|
|
<a href="#" class="sb orange pressed text star">Star</a>
|
|
</p>
|
|
|
|
<h2>Custom</h2>
|
|
|
|
<h3>add icons</h3>
|
|
<p>
|
|
<a href="#" class="sb youtube">YouTube</a>
|
|
<a href="#" class="sb email">Email</a>
|
|
<a href="#" class="sb youtube text">YouTube</a>
|
|
<a href="#" class="sb email text">Email</a>
|
|
</p>
|
|
|
|
<h3>custom icon</h3>
|
|
<p>
|
|
<a href="#" class="sb custom retweet gradient embossed">Retweet</a>
|
|
<a href="#" class="sb custom blue photo gradient embossed">Photo</a>
|
|
<a href="#" class="sb custom pink comment gradient embossed">Comment</a>
|
|
</p>
|
|
|
|
<h2>Download More Icons</h2>
|
|
<p>The icons used in the demo are from the free <a href="http://icondock.com/free/mono-social-icons">Mono Social Icons</a> where you can download from <a href="http://icondock.com">IconDock</a>. The vector EPS version is included in the set. The other matching icons are from the <a href="http://icondock.com/icons/sets/rocky-complete-set">Rocky</a> icon set.</p>
|
|
|
|
</body>
|
|
</html>
|