Aprende a botones de estilo usando CSS.
Styling botón básico
Ejemplo
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
} Inténtalo tú mismo " botón Colores
Utilice el background-color de propiedad para cambiar el color de fondo de un botón:
Ejemplo
.button1 {background-color: #4CAF50;} /* Green */
.button2
{background-color: #008CBA;} /* Blue */
.button3 {background-color:
#f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5
{background-color: #555555;} /* Black */ Inténtalo tú mismo " Tamaños de botón
Utilice el font-size propiedad para cambiar el tamaño de un botón:
Ejemplo
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3
{font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;} Inténtalo tú mismo " Botones redondeados
Utilice la border-radius propiedad para añadir esquinas redondeadas a un botón:
Ejemplo
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3
{border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;} Inténtalo tú mismo " Borders botón de color
Utilice la border la propiedad para agregar un borde de color a un botón:
Ejemplo
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
... Inténtalo tú mismo " Botones Hoverable
Utilice el :hover selector para cambiar el estilo de un botón cuando se pasa el ratón sobre ella.
Consejo: Utilice la transition-duration la propiedad para determinar la velocidad del efecto de "flotar":
Ejemplo
.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
... Inténtalo tú mismo " sombra Botones
Utilice el box-shadow propiedad para añadir sombras a un botón:
Ejemplo
.button1 {
box-shadow: 0 8px 16px 0 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);
} Inténtalo tú mismo " Botones de movilidad
Utilice la opacity la propiedad para añadir transparencia a un botón (crea un vistazo "desactivado").
Consejo: También puede agregar el cursor propiedad con un valor de "no permitidas", el cual mostrará una "muestra del estacionamiento" al pasar el ratón sobre el botón:
Ancho botón
Por defecto, el tamaño del botón está determinado por su contenido de texto (tan amplia como su contenido). Utilizar el width propiedad para cambiar el ancho de un botón:
grupos de botones
Eliminar márgenes y poner float:left a cada botón para crear un grupo de botones:
Bordeadas grupos de botones
Utilice la border propiedad para crear un grupo de botones con borde: