Posted By

konkas on 05/28/11

Tagged

Versions (?)

Last Edited at 05/28/11 02:21am

Statistics

Viewed 545 times

Favorited by 0 user(s)

Related snippets

Facebook & Twitter buttons

/ Published in: CSS

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

button.facebook {
	background: #6e86bd;
	background: -moz-linear-gradient(top, #6e86bd 0%, #6680b9 100%);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6e86bd), to(#6680b9));
	border-top: 1px solid #3f5b98;
	border-left: 1px solid #3f5b98;
	border-bottom: 1px solid #3f5b98;
	border-right: 1px solid #3f5b98;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: inset 0 1px 0 0 #abbbdf;
	-webkit-box-shadow: inset 0 1px 0 0 #abbbdf;
	box-shadow: inset 0 1px 0 0 #abbbdf;
	color: #fff;
	font-size: 1.6em;
	font-weight: bold;
	line-height: 1;
	padding: 8px 0 7px 0;
	text-align: center;
	text-shadow: 0 -1px 1px #344d80;
	width: 233px;
	margin: 0 0 10px 0;
}
 
button.facebook:hover {
	background: #546a99;
	background: -moz-linear-gradient(top, #546a99 0%, #546a99 100%);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#546a99), to(#546a99));
	-moz-box-shadow: inset 0 1px 0 0 #98a8d3;
	-webkit-box-shadow: inset 0 1px 0 0 #98a8d3;
	box-shadow: inset 0 1px 0 0 #98a8d3;
	text-shadow: 0 -1px 1px #283960;
	color: #fff;
	cursor: pointer;
}
 
button.facebook:active {
	border: 1px solid #283960;
	-moz-box-shadow: inset 0 0 4px 2px #51658b, 0 0 1px 0 #eee;
	-webkit-box-shadow: inset 0 0 4px 2px #51658b, 0 0 1px 0 #eee;
	box-shadow: inset 0 0 4px 2px #51658b, 0 0 1px 0 #eee;
}
 
button.twitter {
	background: #fff;
	background: -moz-linear-gradient(top, #fff 0%, #d5e9f6 100%);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#d5e9f6));
	border-top: 1px solid #a4cce6;
	border-left: 1px solid #a4cce6;
	border-bottom: 1px solid #9eb9cc;
	border-right: 1px solid #a4cce5;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	color: #186588;
	font-size: 1.6em;
	font-weight: bold;
	line-height: 1;
	padding: 8px 0 7px 0;
	text-align: center;
	text-shadow: 0 1px 1px #fff;
	width: 233px;
}
 
button.twitter:hover {
	background: #f2f8fc;
	background: -moz-linear-gradient(top, #f2f8fc 0%, #bfe0ee 100%);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f2f8fc), to(#bfe0ee));
	border-top: 1px solid #53a3d7;
	border-left: 1px solid #53a3d7;
	border-bottom: 1px solid #68a0c4;
	border-right: 1px solid #53a3d5;
	text-shadow: 0 1px 1px #fff;
	color: #0c3752;
	cursor: pointer;
}
 
button.twitter:active {
	background: #cee5f4;
	border-top: 1px solid #7ab7de;
	border-left: 1px solid #7ab7de;
	border-bottom: 1px solid #85acc5;
	border-right: 1px solid #7ab7de;
	text-shadow: 0 1px 1px #e6f0f8;
	color: #668a9e;
}