Skip to content

Instantly share code, notes, and snippets.

@kaezarrex kaezarrex/index.html
Last active Dec 11, 2015

Embed
What would you like to do?
Font Awesome buttons
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width">
<title>Social Buttons</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<link href="./style.css" rel="stylesheet">
</head>
<body>
<div>
<a href="#" class="badge badge-twitter">
<i class="icon-twitter"></i>
</a>
<a href="#" class="badge badge-rss">
<i class="icon-rss"></i>
</a>
<a href="#" class="badge badge-phone">
<i class="icon-phone"></i>
</a>
<a href="#" class="badge badge-pinterest">
<i class="icon-pinterest"></i>
</a>
<a href="#" class="badge badge-google-plus">
<i class="icon-google-plus"></i>
</a>
</div>
<div style="margin: 5px;">
<a href="#" class="badge badge-small badge-twitter">
<i class="icon-twitter"></i>
</a>
<a href="#" class="badge badge-small badge-rss">
<i class="icon-rss"></i>
</a>
<a href="#" class="badge badge-small badge-phone">
<i class="icon-phone"></i>
</a>
<a href="#" class="badge badge-small badge-pinterest">
<i class="icon-pinterest"></i>
</a>
<a href="#" class="badge badge-small badge-google-plus">
<i class="icon-google-plus"></i>
</a>
</div>
<div style="margin: 7px;">
<a href="#" class="badge badge-mini badge-twitter">
<i class="icon-twitter"></i>
</a>
<a href="#" class="badge badge-mini badge-rss">
<i class="icon-rss"></i>
</a>
<a href="#" class="badge badge-mini badge-phone">
<i class="icon-phone"></i>
</a>
<a href="#" class="badge badge-mini badge-pinterest">
<i class="icon-pinterest"></i>
</a>
<a href="#" class="badge badge-mini badge-google-plus">
<i class="icon-google-plus"></i>
</a>
</div>
</body>
</html>
body {
background-color: #fff;
margin: 20px;
}
i {
color: #fff;
}
.badge {
display: inline-block;
width: 30px;
height: 30px;
margin: 5px;
padding: 10px;
border: 0px solid black;
border-radius: 30px;
font-size: 30px;
line-height: 1;
text-align: center;
-moz-transition-property: margin, border;
-moz-transition-duration: 0.2s, 0.2s;
-moz-transition-timing-function: ease-in-out, ease-in-out;
-ms-transition-property: margin, border;
-ms-transition-duration: 0.2s, 0.2s;
-ms-transition-timing-function: ease-in-out, ease-in-out;
-o-transition-property: margin, border;
-o-transition-duration: 0.2s, 0.2s;
-o-transition-timing-function: ease-in-out, ease-in-out;
-webkit-transition-property: margin, border;
-webkit-transition-duration: 0.2s, 0.2s;
-webkit-transition-timing-function: ease-in-out, ease-in-out;
}
.badge:hover {
margin: 1px;
border: 4px solid black;
}
.badge-small {
width: 14px;
height: 14px;
margin: 4px;
padding: 6px;
font-size: 15px;
}
.badge-small:hover {
margin: 2px;
border: 2px solid black;
}
.badge-mini {
width: 10px;
height: 10px;
margin: 4px;
padding: 3px;
font-size: 9px;
}
.badge-mini:hover {
margin: 3px;
border: 1px solid black;
}
a {
text-decoration: none;
}
.badge-twitter {
background-color: #41ABE1;
border-color: #41ABE1;
-webkit-box-shadow: 0 0 1px #4184A6;
}
.badge-twitter:hover {
border-color: #4184A6;
}
.badge-rss {
background-color: #F79738;
border-color: #F79738;
-webkit-box-shadow: 0 0 1px #E07A15;
}
.badge-rss:hover {
border-color: #E07A15;
}
.badge-phone {
background-color: #0FC629;
border-color: #0FC629;
-webkit-box-shadow: 0 0 1px #19AD2D;
}
.badge-phone:hover {
border-color: #19AD2D;
}
.badge-pinterest {
background-color: #CB2027;
border-color: #CB2027;
-webkit-box-shadow: 0 0 1px #AA1C22;
}
.badge-pinterest:hover {
border-color: #AA1C22;
}
.badge-google-plus {
background-color: #D95333;
border-color: #D95333;
-webkit-box-shadow: 0 0 1px #BF4527;
}
.badge-google-plus:hover {
border-color: #BF4527;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.