Il framework CSS Bootstrap fornisce diversi bottoni formattati con grande precisione. Bootstrap usa delle classi CSS apposite in modo che gli stili possano essere applicati anche ad elementi HTML diversi dai tradizionali link. Vediamo da vicino gli stili per il bottone predefinito.
Il bottone predefinito ha la classe btn e i suoi stili iniziali sono i seguenti:
.btn {
display: inline-block;
padding: 4px 10px 4px;
margin-bottom: 0;
font-size: 13px;
line-height: 18px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(top, #ffffff, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-bottom-color: #b3b3b3;
border-radius: 4px;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
Il valore inline-block permette di operare sia sul contesto inline che di blocco. Il bottone ha un gradiente di base che viene specificato nelle diverse notazioni specifiche dei browser, compresa quella proprietaria dei filtri di Internet Explorer.
Le proprietà text-shadow e box-shadow conferiscono al bottone un aspetto di tipo glossy, ottenuto anche grazie al sapiente uso dei colori dei bordi.
Su :hover gli stili cambiano per ottenere un morbido effetto di rollover:
.btn:hover {
color: #333333;
text-decoration: none;
background-color: #e6e6e6;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-ms-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
Quando si clicca sul bottone viene emulata la pressione tramite la pseudo-classe :active:
.btn.active,
.btn:active {
background-color: #e6e6e6;
background-image: none;
outline: 0;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
Gli stili di questo stato vengono anche specificati in una classe apposita in modo da poter essere riutilizzati.