Botones CSS


Botones

En este curso veremos algunos codigos parz crear distintos tipos de botones.

Para darle diseño a un botos es importante recordar crear un HTML donde este el botón, si este se encontrara en la parte superior se debe colocar n la cabeza (head).


Botones de tipo alert

Los botones altert son muy similares a los botones BootStrap.



Botones de tipo outline

Este tipo de botones es un poco similar tambien a los botones tipo BootStrap.



Botones que ocupen el 100% del contenedor

Este botón ocupa el 100% de sus contenedores.



Paginados

Utilizar este estilo para diseñar los elementos que formarán parte de la paginación, como los botones de navegación y los números de página.



Breadcrumbs

EStos tipos de botones tambien conocidos como migas de pan, son similares a los paginados, la diferencia es que estos estan separados por diagonales.



Botones con iconos

Esto puede resultar interesante para hacer que la interfaz sea más intuitiva y fácil de entender para los usuarios.



Botones con degradados

Utilizando la propiedad background-image con el valor linear-gradient, se agregara un degradado en los botones. Esto crea un gradiente suave que va de un color a otro en la dirección especificada.



Botones con efecto de pulsación

Con la clase pulse-effect que representa un botón con efecto de pulsación. Al hacer clic en el botón, se aplicará una transformación que reducirá ligeramente su tamaño, proporcionando un efecto visual de pulsación.



Botones con efecto de sombra

Con la clase shadow-effect que representa un botón con efecto de sombra. Al pasar el cursor sobre el botón, se aplicará una sombra sutil que crea profundidad y dimensión en el diseño.


Pagina elaborada por:

Abril Yamilet Cisneos Amador

Para:

CECyTEM