Botón CSS
En esta sección, presentamos el uso de CSS para crear el botón.
Estilo botón básico
Ejemplos CSS
background-color: # 4CAF50; / * * Verde /
border: none;
color: blanco;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Trate »
Color del botón
Podemos utilizar el background-color propiedad para establecer el color del botón:
Ejemplos CSS
.button2 {background-color: # 008CBA;} / * * Azul /
.button3 {background-color: # f44336;} / * * Rojo /
.button4 {background-color: # e7e7e7; color: negro;} / * * Gris /
.button5 {background-color: # 555555;} / * * Negro /
Trate »
Tamaño de los botones
Podemos utilizar el font-size propiedad para establecer el tamaño del botón:
Ejemplos CSS
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Trate »
botón redondeado
Podemos utilizar la border-radius propiedad para establecer el botón de filete:
Ejemplos CSS
.button2 {border-radius: 4 píxeles;}
.button3 {border-radius: 8 píxeles;}
.button4 {border-radius: 12px;}
.button5 {frontera de radio: 50%;}
Trate »
color del borde del botón
Podemos utilizar la border propiedad de un botón de color frontera:
Ejemplos CSS
background-color: blanco;
color: negro;
frontera: 2px # sólida 4CAF50; / * * Verde /
}
...
Trate »
Botón activable
Podemos utilizar el :hover selector para modificar el estilo colocando el cursor sobre el botón.
Consejo: Podemos utilizar la transition-duration la propiedad se ajusta a "flotar" la velocidad del efecto:
Ejemplos CSS
-webkit-transición de duración: 0,4 s; / * Safari * /
transición de duración: 0,4 s;
}
.button: hover {
background-color: # 4CAF50; / * * Verde /
color: blanco;
}
...
Trate »
sombra botón
Podemos utilizar el box-shadow propiedad para añadir una sombra al botón:
Ejemplos CSS
box-shadow: 0 0 8 píxeles 16px RGBA (0,0,0,0.2), 0 6px 20px 0 RGBA (0,0,0,0.19);
}
.button2: hover {
box-shadow: 0 12px 16px 0 RGBA (0,0,0,0.24), 0 17px 50px 0 RGBA (0,0,0,0.19);
}
Trate »
botón Desactivar
Podemos utilizar la opacity la propiedad para aumentar la transparencia (es similar a "desactivado" atribuir efectos) para el botón.
Consejo: ¿Qué puedo añadir cursor la propiedad y se ajusta a "no-permitido" para establecer una imagen de personas con discapacidad:
Ancho botón
Por defecto, el tamaño del texto del botón en el botón ha decidido (basado en el texto de longitud coincidente). Podemos utilizar el width propiedad para establecer la anchura del botón:
Consejo: Si desea establecer un ancho fijo puede utilizar píxeles (px) como una unidad, si desea configurar los botones de respuesta se puede establecer como un porcentaje.
Grupo de botones
Retirar del exterior y añadir float:left conjunto de botones:
Con la frontera del Grupo de botones
Podemos utilizar la border propiedad para establecer el grupo de botones con la frontera: