css facebook button

gistfile1.css

.btn-facebook 
{
    position: relative;

    display: inline-block;
    outline: 1px solid #29447e;
    border-top: 1px solid #879ac0;
    width: auto;
    height: 38px;
    padding: 0 14px 0 54px;
    line-height: 38px;
    
    text-indent: 0;
    background: #758fc7;
    color: #FFF;
    font-size: 1em;
    font-weight: 500;
    font-family: Helvetica;
    overflow: hidden;
    cursor: pointer;
}

.btn-facebook:hover
{
    outline: 1px solid #29447e;

    color: #FFF;
    font-weight: 500;
    text-decoration: none;
}

html.boxshadow.textshadow .btn-facebook.shadowed
{
    text-shadow: -1px 1px 0 rgba(0,0,0,0.6);
    
    background: -webkit-linear-gradient(to bottom, #758fc7 0%,#667cb2 100%);
    background: -moz-linear-gradient(to bottom, #758fc7 0%,#667cb2 100%);
    background: -o-linear-gradient(to bottom, #758fc7 0%,#667cb2 100%);
    background: -ms-linear-gradient(to bottom, #758fc7 0%,#667cb2 100%);
    background: linear-gradient(to bottom, #758fc7 0%,#667cb2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#758fc7', endColorstr='#667cb2',GradientType=0 );
}

html.borderradius .btn-facebook.corner-rounded
{
    outline: none;
    border: none;
    height: 40px;

    line-height: 40px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

html.borderradius .btn-facebook.corner-rounded:hover
{
    outline: none;
}

.btn-facebook:before 
{
    position: absolute;
    left: 0;
    top: 0;

    display: block;
    border-right: 1px solid #405b91;
    width: 38px;
    height: 38px;

    content: "";
    background: 12px 4px no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAeCAYAAAAl+Z4RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODA2MDVENUI4MDY4MTFFM0FDMDRFRUNDQkJDOEMyMjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODA2MDVENUM4MDY4MTFFM0FDMDRFRUNDQkJDOEMyMjkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4MDYwNUQ1OTgwNjgxMUUzQUMwNEVFQ0NCQkM4QzIyOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4MDYwNUQ1QTgwNjgxMUUzQUMwNEVFQ0NCQkM4QzIyOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqLvv6AAAAEUSURBVHjaYvz//z8DHsAKxMFAHA3EWkDMDxX/DcS/gPgBA8gAHFgGiA/+xw/e4tLMC8Sn/xMGb5lwOD0fiE0YiAAsWMTYgDgKh3pQgH2B+h8UPu+xGaAExCpYxD8AcRYQ7wHiP0DMCDIQmwGiUNPRwUIgXo4uyIQj6rCBB9gEmXD4Exv4R6wBJAFQGPBBAwQEvgIxNw61HFCaH9lVjMDEcB3IEIGGLMj57EAshMWAT1ALYJZxAfE+kAvEcGhAB3xQjAy+UhoG9yg14D6lBjwEhUEmNIRB8fwTiA2BuBKL4sVAvBGIOWHJGIjPY8vKTjiybh62rE9xQho1YNSAwWEAtmIdVHF+g2YsWAHLC8Q/sBkAEGAAWiPV77QJ7xcAAAAASUVORK5CYII=);
}

html.boxshadow.textshadow .btn-facebook.shadowed:before 
{
    border-right: 1px solid #3d6684;
    width: 40px;
    height: 40px;

    content: '';
    -webkit-box-shadow: 1px 0 0 #7D99D5;
    box-shadow: 1px 0 0 #7D99D5;
    background: 11px 3px no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAiCAYAAABfqvm9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODA2MDVENUY4MDY4MTFFM0FDMDRFRUNDQkJDOEMyMjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODA2MDVENjA4MDY4MTFFM0FDMDRFRUNDQkJDOEMyMjkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4MDYwNUQ1RDgwNjgxMUUzQUMwNEVFQ0NCQkM4QzIyOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4MDYwNUQ1RTgwNjgxMUUzQUMwNEVFQ0NCQkM4QzIyOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pm3oUMYAAAL9SURBVHja7FbNShtRFM6MdzKZ/KjRxGhDiiKUthR1UbpQaEF8AEvori/hylcoQh/AtdAS6BPEbAKRQBfddWG7sdLWVklsoknmL5l+x56RYTpjrHTpgY+b5N755px7zvlOpMhwkwAZUBiCv7vWB2zApFUaQkYPqkACGAWSgMak9KwD6EAbaADn4gqyESAGTExNTRW2traKy8vLa9lsNq+qqnbhGsxxHLvX633P5XLP2cvQMOPA3WKx+OLw8PCTc4WB8BxnHwPpMEK6q9zi4uLa0dHRgTPEut1uB+dXgMkwQrqz+7u7uyXnGgYPifAJeShCwlVnZmYyS0tLz8LeaBiGSXcohJBs225zYmwRltn19fV76XQ649+EN8b29vabUqlUhXOtRCLRi8fjLc6yGeahyOfz2RGYf7Ner7/f2Nh4i48HwBnXoMXlY4URyuBSgkJtNBrfsPxknHMtRtxV+IguCQeDQWDRy7LsemR7yC5NeNpK9axpXde1IELLsujMGJeIzq1HLzDcpNCB1Orq6iwufAxE8f39fQ0eTgcRIqPjkiTNLSwsTCuKYqBrdE3TTiuVyhe6AgorBdxptVoVHEhTN4EsQneIDKp+QrzQMk3TAGkEcKLRqHJ8fPyhUCi8xPYPwWGPYmMiFovFh0kPzigE72/tdtvhvpdlFgEVNSVFbmhoz4abVCIcXOgY3L8p4cnJyVdWmr7MWeqAcHBTwmaz+RlLl7gEM5+Wy+VXyPJkp9NRcUCZn59/iPZb8T+8t7f3sVar1TOZjIXsGslkslOtVmvkFEd7kRRSYiqTWeAB8HRzc/N1kLLs7Oy8w/4a8AiYowrhuozSPQoOucuFKfNGH28+C8myzm1H99Zjr1w4gtvHcd3l1UQd9kNab+DpDCNIqv6r3RLeEgYNnD8i4vwroY2OMII2oJtm2DzxD6mIZ3oZqVTqFOptYobYpJWszirJvaflAkdmkNekvuP0z4uFQ2GvqOebwC9Xrq5DKPkm4Qh/dzxD3WSyv8L+LcAAuRqaZh4tOTwAAAAASUVORK5CYII=);
}