<a href="" class="facebook-a">
<span class="facebook-a-bold">Log In</span> with <span class="facebook-a-bold">Facebook</span>
</a>
.facebook-a {
background: -moz-linear-gradient(to bottom, #405896, #374c8d, #304272);
background: -o-linear-gradient(to bottom, #405896, #374c8d, #304272);
background: -webkit-linear-gradient(to bottom, #405896, #374c8d, #304272);
background: -webkit-gradient(to bottom, #405896, #374c8d, #304272);
background: linear-gradient(to bottom, #405896, #374c8d, #304272);
border-radius: 4px;
border-top: 1px solid #758ab5;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #fbffff;
display: block;
font-size: 16px;
height: 35px;
line-height: 35px;
margin: 0 auto;
position: relative;
text-align: center;
text-decoration: none;
vertical-align: middle;
width: 276px;
}
.facebook-a::before {
background-image: url('../img/border.png');
background-position: right center;
background-repeat: no-repeat;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
content: 'f';
display: inline-block;
font-family: Arial, Gadget, sans-serif;
font-size: 24px;
font-weight: 700;
height: 35px;
left: 0;
line-height: 35px;
position: absolute;
text-align: center;
top: -1px;
vertical-align: middle;
width: 39px;
}
.facebook-a-bold {
font-weight: bold;
letter-spacing: .5px;
}
.facebook-a::after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
content: '\203a';
display: inline-block;
font-size: 33px;
height: 35px;
line-height: 30px;
position: absolute;
right: 26px;
vertical-align: middle;
width: 10px;
}