Botones CSS
- Página anterior Máscaras CSS
- Página siguiente Paginación CSS
Aprende cómo configurar estilos de botones con CSS.
Estilo básico de botón
Ejemplo
.button {
color_fondo: #4CAF50; /* Verde */
border: none;
color: blanco;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Color del botón
Utilice background-color Atributo para cambiar el color de fondo del botón:
Ejemplo
.button1 {background-color: #4CAF50;} /* Verde */
.button2 {background-color: #008CBA;} /* Azul */
.button3 {background-color: #f44336;} /* Rojo */
.button4 {background-color: #e7e7e7; color: black;} /* Gris */
.button5 {background-color: #555555;} /* Negro */
Tamaño del botón
Utilice font-size Atributo para cambiar el tamaño de la fuente del botón:
Ejemplo
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Utilice padding Atributo para cambiar el relleno interno del botón:
Ejemplo
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
Botón con radio
Utilice border-radius Atributo para agregar radio a los botones:
Ejemplo
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {radio_borde: 12px;}
.button5 {radio_borde: 50%;}
Borde de color del botón
Utilice border Agregue un borde de color a los botones.
Ejemplo
.button1 {
color_fondo: blanco;
color: negro;
borde: 2px sólido #4CAF50; /* Verde */
}
...
Botón con efecto deslizante
Al pasar el ratón sobre el botón, utilice :hover El selector puede cambiar el estilo del botón.
Consejo:Utilice duración_transición Agregue propiedades para determinar la velocidad del efecto "al pasar el ratón".
Ejemplo
.button {
duración_transición: 0.4s;
}
.button:hover {
color_fondo: #4CAF50; /* Verde */
color: blanco;
}
...
Botón con sombra
Utilice sombra Agregue sombras a los botones.
Ejemplo
.button1 {
sombra: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
sombra: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
Botón desactivado
Utilice opacidad Agregue opacidad a los botones para crear un aspecto "desactivado".
Consejo:También puede agregar propiedades con el valor "no permitido" cursor Agregue propiedades que muestren el "señal de prohibición de estacionamiento" (señal de prohibición) cuando coloque el ratón sobre el botón:
Ejemplo
.disabled {
opacidad: 0.6;
cursor: no permitido;
}
Ancho del botón
Por defecto, el tamaño del botón depende de su contenido de texto (igual al ancho del contenido). Utilice ancho Agregue propiedades para cambiar el ancho del botón:
Ejemplo
.button1 {ancho: 250px;}
.button2 {ancho: 50%;}
.button3 {ancho: 100%;}
Agrupación de botones
Elimine los márgenes exteriores y agregue propiedades a cada botón float:leftpara crear un grupo de botones:
Ejemplo
.button {
float: left;
}
Grupo de botones con borde
Usar border Propiedad para crear un grupo de botones con borde:
Ejemplo
.button {
float: left;
border: 1px solid green;
}
Grupo de botones verticales
Usar display:block Reemplazar float:left Agrupar botones verticalmente en lugar de horizontalmente:
Ejemplo
.button {
display: block;
}
Botón de animación
Ejemplo 1
Añadir flecha al pasar el ratón:
Ejemplo 2
Añadir efecto de 'presión' al hacer clic:
Ejemplo 3
Desvanecerse al pasar el ratón:
Ejemplo 4
Añadir efecto de 'ondas' al hacer clic:
- Página anterior Máscaras CSS
- Página siguiente Paginación CSS
