Il design dei pulsanti con i CSS segue una procedura specifica.
La soluzione è partire da alcune regole di base comuni:
.button {
display: inline-block;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
transition-property: all;
transition-duration: 400ms;
padding: 0.8em 1.5em;
}
Dobbiamo tener conto del fatto che la nostra classe verrà usata non solo da normali link ma anche dai pulsanti. Quindi possiamo essere più specifici usando la cascata:
.button-rounded {
border-radius: 10em;
}
Colori e sfondi possono essere definiti a parte:
.button-primary {
background-color: #c00;
color: #fff;
border-color: #c00;
}
Quindi avremo la loro combinazione sugli elementi:
<a href="" class="button button-rounded button-primary">Link</a>