Learn how-to create classic Facebook buttons using HTML and CSS.

HTML

<!-- Small -->
<a href="" class="btn btn-sm fb-grey">Grey Button</a>
<a href="" class="btn btn-sm fb-purple">Purple Button</a>
<a href="" class="btn btn-sm fb-green">Green Button</a>

<!-- Standard -->
<a href="" class="btn fb-grey">Grey Button</a>
<a href="" class="btn fb-purple">Purple Button</a>
<a href="" class="btn fb-green">Green Button</a>

<!-- Large -->
<a href="" class="btn btn-lg fb-grey">Grey Button</a>
<a href="" class="btn btn-lg fb-purple">Purple Button</a>
<a href="" class="btn btn-lg fb-green">Green Button</a>

CSS

.btn {padding:10px 15px;font-size:100%;}
a.btn,a.btn:link,a.btn:active,a.btn:focus,a.btn:visited,a.btn:hover {text-decoration:none;}
.btn-sm {padding:5px 10px;font-size:90%;}
.btn-lg {padding:15px 20px;font-size:125%;}
.fb-grey {
	color: #fff;
	background-color: #efeff0;
	background-image: -webkit-gradient(linear, left 0, left 100%, from(#fdfdfd), to(#efeff0));
	background-image: -webkit-linear-gradient(top, #fdfdfd, 0, #efeff0, 100%);
	background-image: -moz-linear-gradient(top, #fdfdfd 0, #efeff0 100%);
	background-image: linear-gradient(to bottom, #fdfdfd 0, #efeff0 100%);
	background-repeat: repeat-x;
    border-top:1px solid #a6a6a6;
    border-left:1px solid #959595;
    border-bottom:1px solid #959595;
    border-right:1px solid #959595;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffdfdfd', endColorstr='#ffefeff0', GradientType=0);
	border-radius:0px;
	text-align:center;
	color:#505050;
	font-weight:bold;
}
.fb-purple {
	color: #fff;
	background-color: #5872a7;
	background-image: -webkit-gradient(linear, left 0, left 100%, from(#637bad), to(#5872a7));
	background-image: -webkit-linear-gradient(top, #637bad, 0, #5872a7, 100%);
	background-image: -moz-linear-gradient(top, #637bad 0, #5872a7 100%);
	background-image: linear-gradient(to bottom, #637bad 0, #5872a7 100%);
	background-repeat: repeat-x;
    border-top:1px solid #29447e;
    border-left:1px solid #29447e;
    border-bottom:1px solid #1a356e;
    border-right:1px solid #29447e;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff637bad', endColorstr='#ff5872a7', GradientType=0);
	border-radius:0px;
	text-align:center;
	color:#fff;
	font-weight:bold;
}
.fb-green {
	color: #fff;
	background-color: #67a54b;
	background-image: -webkit-gradient(linear, left 0, left 100%, from(#75ae5c), to(#67a54b));
	background-image: -webkit-linear-gradient(top, #75ae5c, 0, #67a54b, 100%);
	background-image: -moz-linear-gradient(top, #75ae5c 0, #67a54b 100%);
	background-image: linear-gradient(to bottom, #75ae5c 0, #67a54b 100%);
	background-repeat: repeat-x;
    border-top:1px solid #3b6e22;
    border-left:1px solid #3b6e22;
    border-bottom:1px solid #2c5115;
    border-right:1px solid #3b6e22;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff75ae5c', endColorstr='#ff67a54b', GradientType=0);
	border-radius:0px;
	text-align:center;
	color:#fff;
	font-weight:bold;
}
a.fb-grey:hover { color:#505050;}
a.fb-green:hover,a.fb-purple:hover { color:#fff;}
.fb-grey {
	color: #fff;
	background-color: #efeff0;
	background-image: -webkit-gradient(linear, left 0, left 100%, from(#fdfdfd), to(#efeff0));
	background-image: -webkit-linear-gradient(top, #fdfdfd, 0, #efeff0, 100%);
	background-image: -moz-linear-gradient(top, #fdfdfd 0, #efeff0 100%);
	background-image: linear-gradient(to bottom, #fdfdfd 0, #efeff0 100%);
	background-repeat: repeat-x;
    border-top:1px solid #a6a6a6;
    border-left:1px solid #959595;
    border-bottom:1px solid #959595;
    border-right:1px solid #959595;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffdfdfd', endColorstr='#ffefeff0', GradientType=0);
	border-radius:0px;
	text-align:center;
	color:#505050;
	font-weight:bold;
}
.fb-purple {
	color: #fff;
	background-color: #5872a7;
	background-image: -webkit-gradient(linear, left 0, left 100%, from(#637bad), to(#5872a7));
	background-image: -webkit-linear-gradient(top, #637bad, 0, #5872a7, 100%);
	background-image: -moz-linear-gradient(top, #637bad 0, #5872a7 100%);
	background-image: linear-gradient(to bottom, #637bad 0, #5872a7 100%);
	background-repeat: repeat-x;
    border-top:1px solid #29447e;
    border-left:1px solid #29447e;
    border-bottom:1px solid #1a356e;
    border-right:1px solid #29447e;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff637bad', endColorstr='#ff5872a7', GradientType=0);
	border-radius:0px;
	text-align:center;
	color:#fff;
	font-weight:bold;
}
.fb-green {
	color: #fff;
	background-color: #67a54b;
	background-image: -webkit-gradient(linear, left 0, left 100%, from(#75ae5c), to(#67a54b));
	background-image: -webkit-linear-gradient(top, #75ae5c, 0, #67a54b, 100%);
	background-image: -moz-linear-gradient(top, #75ae5c 0, #67a54b 100%);
	background-image: linear-gradient(to bottom, #75ae5c 0, #67a54b 100%);
	background-repeat: repeat-x;
    border-top:1px solid #3b6e22;
    border-left:1px solid #3b6e22;
    border-bottom:1px solid #2c5115;
    border-right:1px solid #3b6e22;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff75ae5c', endColorstr='#ff67a54b', GradientType=0);
	border-radius:0px;
	text-align:center;
	color:#fff;
	font-weight:bold;
}
a.fb-grey:hover {
	color: #505050;
}
a.fb-green:hover, a.fb-purple:hover {
	color: #fff;
}