Estilización de botones en CSS | Explicado

Insertar botones simples en su sitio web puede ser un poco aburrido, sin embargo, agregarles varios estilos puede mejorar su aspecto general. Este estilo se puede realizar utilizando múltiples propiedades de CSS, como color de fondo, color, ancho, acolchado, sombra de caja, transición, etc. Aquí en este artículo, le enseñaremos cómo diseñar botones en varias modas. Esta publicación está diseñada para cubrir los siguientes temas.

1. Cambiar los colores de los botones
2. Alterando los tamaños de los botones
3. Creación de botones redondeados o con círculo
4. Agregar efecto de desplazamiento a los botones
5. Agregar efectos a los botones
6. Agregar sombras a los botones
7. Botones de diseño para discapacitados

Empecemos.

Cómo cambiar los colores de los botones

Con el propósito de cambiar los colores, más específicamente, los colores de fondo de los botones, se utiliza la propiedad CSS de color de fondo. A continuación le hemos presentado un ejemplo.

Html

Botón

Usando HTML básico hemos creado un botón.

CSS

.btn
Color de fondo: Rosybrown;
borde: ninguno;
color blanco;
relleno: 20px 35px;
tamaño de fuente: 16px;

Además de darle al botón un cierto relleno, borde y tamaño de fuente, hemos establecido el color de fondo en marrón rosado. Puedes cambiar el color de acuerdo con tu deseo.

Producción

Se creó un botón con un color de fondo marrón rosado.

Si desea agregar colores solo al borde del botón, use la propiedad del borde CSS.

CSS

.btn
Color de fondo: blanco;
borde: 2px azul sólido;
de color negro;
relleno: 25px;
tamaño de fuente: 16px;

En el código anterior, estamos configurando el color de fondo en blanco, mientras tanto, el borde sólido recibió una longitud de 2 px con color azul.

Producción

Se generó un botón con borde azul.

Cómo alterar los tamaños de los botones

Puede haber varias formas de alterar el tamaño del botón y todas las formas posibles se describen a continuación junto con los ejemplos apropiados y a punto.

Método 1: cambiando el relleno de botones

La primera y más usada forma de cambiar el tamaño de un botón es mediante el uso de la propiedad de relleno. Diferentes rellenos darán como resultado diferentes tamaños de un botón.

CSS

.btn
Color de fondo: Rosybrown;
borde: ninguno;
color blanco;
tamaño de fuente: 16px;

.btn1
relleno: 10px 24px;

.btn2
relleno: 32px 16px;

A los lados superior e inferior del primer botón se les ha asignado relleno de 10 px, mientras tanto, y los lados izquierdos tienen un relleno de 24 px. En cuanto al segundo botón, la parte superior, y los lados inferiores se proporcionan con relleno de 32 px cada uno, mientras que los lados derecho e izquierdo se administran con relleno de 16 px.

Producción

Se crearon botones con varios modos.

Método 2: cambiando el tamaño de fuente

Otra forma de cambiar el tamaño de un botón es cambiar el tamaño de fuente del botón TE. Al aumentar o disminuir el tamaño de fuente, el tamaño del botón se ve afectado. Cuanto más grande sea el tamaño de fuente, más grande es el botón. Considere el fragmento de código a continuación.

Html

Botón
Botón

Aquí hemos creado dos botones para demostrar la diferencia entre varios tamaños de fuente y cómo afectan los tamaños de los botones.

CSS

.btn
Color de fondo: Rosybrown;
borde: ninguno;
color blanco;
relleno: 20px 35px;

.btn1
tamaño de fuente: 12px;

.btn2
tamaño de fuente: 24px;

Ambos botones han sido asignados el mismo color de fondo, color, borde y relleno. Sin embargo, al primer botón se le ha asignado el tamaño de fuente de 12px y el otro botón 24px.

Producción

Los botones con varios tamaños se crearon con éxito.

Método 3: cambiando el ancho de los botones

Otra forma de cambiar el tamaño de un botón es ajustando su ancho. Sigue el ejemplo a continuación.

CSS

.btn
Color de fondo: Rosybrown;
borde: ninguno;
color blanco;
relleno: 20px 35px;
bloqueo de pantalla;
margen: 5px 3px;
tamaño de fuente: 16px;

.btn1
Ancho: 20%;

.btn2
Ancho: 50%;

Con el fin de mostrar cada uno de los botones en una nueva línea, los estamos convirtiendo en elementos de nivel de bloque y establecer sus márgenes. Además, el ancho del primer botón se establece en 20%, mientras que el ancho del segundo botón se establece en 50%.

Producción

Se han creado botones con varios anchos con éxito.

Cómo crear botones redondeados o con círculo

Para crear botones redondeados o con círculo, use la propiedad de Border-Radius de Border CSS. Te hemos presentado un ejemplo a continuación.

CSS

.btn
Color de fondo: Rosybrown;
borde: ninguno;
color blanco;
relleno: 25px;
tamaño de fuente: 16px;

.btn1
Border-Radius: 8px;

.btn2
Radio fronterizo: 50%;

En el código anterior, con el propósito de redondear solo las esquinas del botón, le estamos dando al radio de borde un valor en los píxeles. Sin embargo, para que el botón sea un círculo completo, le hemos dado al radio de borde un valor en porcentaje.

Producción

Se creó un botón redondeado y con círculo con gran facilidad.

Cómo agregar efecto de desplazamiento a los botones

Para hacer que sus botones sean más interesantes, puede agregarles un efecto de desplazamiento para que su apariencia sea más atractiva. Use el fragmento de código a continuación.

CSS

.btn
Color de fondo: blanco;
Border: 2px Rosibrown sólido;
de color negro;
relleno: 25px;
tamaño de fuente: 16px;

.btn: hover
Color de fondo: Rosybrown;
color blanco;

Antes del efecto desplazamiento, el botón se ha diseñado utilizando varias propiedades CSS. Mientras tanto, una vez que el usuario trae el mouse sobre el botón, el color de fondo cambiará a marrón rosado y el color de fuente a blanco.

Producción

Se ha generado un botón con un efecto de desplazamiento.

Otra cosa divertida que puede hacer es que especifique la duración de la transición del efecto flotante para que sea más atractivo utilizando la propiedad de duración de la transición.

CSS

.btn
Color de fondo: blanco;
Border: 2px Rosibrown sólido;
de color negro;
relleno: 25px;
tamaño de fuente: 16px;
Duración de transición: 0.5s;

.btn: hover
Color de fondo: Rosybrown;
color blanco;

La duración de la transición se ha establecido en 0.5 segundos.

Producción

Se agregó con éxito un efecto flotante con una duración de transición.

Cómo agregar un desvanecimiento en efecto a los botones

Fade in Effects se usa junto con los efectos de ciervo y estos se pueden agregar a los botones utilizando la propiedad de opacidad. Aquí hay un ejemplo.

CSS

.btn
Color de fondo: Rosybrown;
borde: ninguno;
color blanco;
relleno: 30px;
tamaño de fuente: 16px;
Opacidad: 0.4;
Duración de transición: 0.5s;

.btn: hover
Opacidad: 1;

Antes del efecto desplazamiento, la opacidad del botón se ha establecido en 0.4. Mientras que, cuando se inicia el efecto flotante, la opacidad se convertirá en 1 con una duración de transición de 0.5 segundos.

Producción

Se implementó con éxito un desvanecimiento en efecto.

Hwo para agregar sombras a los botones

Usando la propiedad de la caja de la caja, se pueden agregar sombras a los botones para mejorar su belleza. Sigue el ejemplo a continuación mencionado.

CSS

.btn
Color de fondo: Rosybrown;
borde: ninguno;
color blanco;
relleno: 30px;
tamaño de fuente: 16px;
Duración de transición: 0.5s;
Shadow de caja: 0 5px 10px 0 gris;

En el código anterior, estamos agregando una sombra de color gris y hemos asignado cada lado de la sombra cierta longitud.

Producción

Se agregó una sombra con éxito al botón.

Nota: También puede agregar un efecto de desplazamiento junto con la sombra para que el botón sea más atractivo.

Cómo estilo desactivados-buttones

Para hacer un botón de desactivación, debemos mencionar un atributo deshabilitado a la etiqueta del botón en HTML, como se muestra en el fragmento HTML a continuación:

Botón

Con el propósito de diseñar botones para discapacitados, puede usar dos propiedades CSS que son: opacidad y cursor. A continuación hemos demostrado cómo puede crear un botón deshabilitado.

CSS

.btn
Color de fondo: Rosybrown;
borde: ninguno;
color blanco;
relleno: 30px;
tamaño de fuente: 16px;
Duración de transición: 0.5s;
Opacidad: 0.4;
cursor: no permitido;

Para crear un botón deshabilitado, la opacidad del botón ha sido a 0.4 y el cursor a no permitido.

Producción

Se generó un botón deshabilitado.

Conclusión

Sin embargo, agregar botones simples a sus páginas web puede ser un poco aburrido, diseñarlos mediante el uso de varias propiedades CSS puede mejorar su aspecto general. Propiedades como color de fondo, color, radio borde, opacidad, relleno, ancho, sombra de caja, etc., pueden ser útiles al dar un cierto estilo a los botones. Además de esto, también puede agregar varios efectos a los botones como el flotador o desvanecerse, etc. Además, también puede animar estos efectos mediante la propiedad de transición. Esta publicación guía sobre varias formas en que puede diseñar sus botones con la ayuda de ejemplos.