CSS: creare il design per i pulsanti

CSS: creare il design per i pulsanti

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>

Torna su