Botão Bootstrap personalizado

Botão Bootstrap personalizado com ou sem icon via Font Awesome.

by Salustiano Silva

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<p>
    Botão com a formatação existente na framework:
    <br/>
    <a href="#" title="" class="btn btn-primary">
        <span class="icon">F</span> compartilhar
    </a>
</p>
<p>
    Botão com a classe que o altera para o estilo pretendido:
    <br/>
    <a href="#" title="" class="btn btn-primary btn-facebook">
        <span class="icon">F</span> compartilhar
    </a>
</p>
<p>
    Botão com a classe que o altera para o estilo pretendido e com icons da Font Awesome:
    <br/>
    <a href="#" title="" class="btn btn-primary btn-facebook">
        <span><span class="fa fa-facebook"></span></span> compartilhar
    </a>
</p>

CSS

.btn-facebook{
    border-radius:0;
    background-color:#0971E4;
    padding-left:0;
    border:0 none;
}
.btn-facebook > span{
    padding:6px 12px;
    margin-right:12px;
    background-color:#0A62C4;
}
.btn-facebook:hover,
.btn-facebook:active,
.btn-facebook:focus{
    background:#0862c9;
}
.btn-facebook:hover > span,
.btn-facebook:active > span,
.btn-facebook:focus > span{
    background:#0954ab;
}

p{
    padding:10px;
}