Estilo de Botones

Colores de los botones

Utilice la background-color propiedad para cambiar el color de fondo de un botón.


Tamaños de botones

Utilice la font-size propiedad para cambiar el tamaño de fuente de un botón.

Utilice la padding propiedad para cambiar el relleno de un botón.

Botones redondeados

Use la border-radius propiedad para agregar esquinas redondeadas a un botón.


Bordes de botones de colores

Use la border propiedad para agregar un borde de color a un botón.

Botones flotantes

Use el :hover selector para cambiar el estilo de un botón cuando mueva el mouse sobre él.

Sugerencia: utilice la transition-duration propiedad para determinar la velocidad del efecto "hover".


Botones de sombra

Use la box-shadow propiedad para agregar sombras a un botón.

Ancho del botón

Utilice la width propiedad para cambiar el ancho de un botón

Botones desactivados

Utilice la opacity propiedad para agregar transparencia a un botón (crea un aspecto "deshabilitado").

Sugerencia: también puede agregar la cursor propiedad con un valor de "no permitido", que mostrará una "señal de no estacionamiento" cuando pase el mouse sobre el botón.

Grupos de botones

Elimine los márgenes y agregue float:left a cada botón para crear un grupo de botones.


Grupo de botones con borde

Utilice la border propiedad para crear un grupo de botones con borde.


Grupo de botones verticales

Use en display:block lugar de float:left para agrupar los botones uno debajo del otro, en lugar de uno al lado del otro.



Última modificación: lunes, 7 de junio de 2021, 21:18