<input> i <botons> i CSS3

Modificació de <input type=”button”> i <button> en CSS3
Hi ha moltes i diverses maneres de modificar l’aspecte d’un botó en CSS3. Aquí n’expliquem una de molt assequible.

El primer que al fe és…

<button id="exemple">

Al document CSS associat …


#exemple{
/* Canvia el color de fons del botó* /
background-color:#008CBA;

/* Canvia la mida del botó* /
font-size:12px;

/* Canvia el marge intern del botó* /
padding: 32px 16px;

/* Afegir les cantonades arrodonides* /
border-radius: 50%;

/* Per afegir color a las cantonades* /
border: 2px solid #4CAF50; /* Verd */

/* Utilitzeu «selector:hover» per canviar l'estil d'un botó quan el ratolí passa sobre. */

button:hover {
background-color: #4CAF50; /* Verd */
color: white;
}

/* Utilitzeu la propietat de «transition-duration» per determinar la velocitat de l'efecte de «:hover»* /
button{
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;}

/* Afegir ombra al botó*
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
/* Afegir opacitat al botó* /
.disabled {
opacity: 0.6;
}
/* Per defecte l'amplada del botó es mida depenent del text* /
.button1 {
width: 250px;
}

/* Per eliminar marges i «left», per agrupar els botons a l'esquerra* /
.button {
float: left;
}

/* Per agrupar els botons un sota l'altra, en comptes del costat */
.button {
display: block;
}