En el desarrollo web, los botones son los componentes clave que habilitan la interacción del usuario con el sitio web. Los botones pueden mejorar la experiencia del desarrollador y aportar más ingresos al negocio. Además, los botones ayudan a los desarrolladores a navegar por el producto porque requieren que los usuarios conviertan los resultados deseados.

En este artículo, demostraremos:

• Cómo crear/hacer un botón en HTML?
• Cómo peinar el botón Haga clic en CSS?

Cómo crear/hacer un botón en HTML?

Para crear/hacer un botón en HTM, el HTML "El elemento se utiliza. Para una demostración práctica, debe consultar las instrucciones dadas.

Paso 1: Haga un contenedor "Div"

Inicialmente, haz un "div"Container insertando un"" elemento. Luego, asigne un atributo de clase y asigne un nombre para su uso posterior.

Paso 2: inserte un encabezado

A continuación, utilice la etiqueta de encabezado HTML para insertar un encabezado. Los usuarios pueden usar cualquier etiqueta de encabezado del "

" hacia "

" etiqueta. En este escenario, el "

Paso 3: crear un botón

Después de eso, cree un elemento de botón con la ayuda del "" elemento. Luego, especifique el botón "tipo" como "entregar"E incrusta algún texto entre la etiqueta del botón para mostrar en el botón:

Botón de estilo de estilo

Haga clic en el botón

Se puede observar que el botón se ha creado con éxito:

Muévase hacia la siguiente sección para conocer sobre el estilo del botón hecho hecho.

Cómo diseñar un botón haciendo clic en CSS?

Hay diferentes pseudo-clases, que incluyen ":flotar" y ":enfocar"Utilizado con elementos de botón. Además, el usuario también puede aplicar las diversas propiedades de CSS en un botón para el estilo.

Para peinar un botón hecho en CSS, pruebe el siguiente procedimiento.

Paso 1: Contenedor de estilo "Div"

Acceder al "divContainer mediante el uso del selector de atributos y el atributo. Para hacerlo, el ".contenedor de btn"Se usa para este propósito:

.BTN-Container
margen: 60px;
relleno: 20px 40px;
borde: 3px punteado RGB (47, 7, 224);
Altura: 150px;
Ancho: 200px;
Alineación de ítems: Centro;

Según el fragmento de código dado:

• "margen"La propiedad ayuda a agregar el espacio en blanco alrededor del límite del elemento.
• "relleno"Se usa para especificar el espacio dentro del elemento.
• "altura" y "ancho"Las propiedades asignan el tamaño para un elemento definido.
• "ítems alineados"Se utiliza para configurar la alineación del elemento dentro del elemento.

Producción

Paso 2: elemento de botón de estilo

Acceda al elemento del botón con la ayuda de "botón”Y aplique las propiedades declaradas en el fragmento de código:

botón
Filtro: Shadow (5px 8px 9px RGB (42, 116, 126));
Altura: 50px;
Ancho: 100px;
Color de fondo: amarillo;

Aquí:

• "filtrarLa propiedad se utiliza para aplicar el efecto visual en el elemento definido. Para hacerlo, el valor de esta propiedad se establece como "sombra de caída", Que se utiliza para especificar la sombra en el elemento.
• "color de fondo"Se utiliza para asignar el color en la parte trasera del elemento. Por ejemplo, el valor de esto se especifica como "amarillo".

Producción

Paso 3: Estilo con el selector ": Hover"

Ahora, acceda al elemento del botón a lo largo del pseudo selector, que se utiliza para seleccionar elementos cuando el usuario del usuario sobre ellos:

Botón: Hover
Color de fondo: RGB (238, 7, 7);

Para hacerlo, el "color de fondo"La propiedad se usa con el valor"RGB (238, 7, 7)". Este color solo se mostrará cuando el usuario se cierne sobre el botón.

Producción

Paso 4: Estilo con selector ": Focus"

Ahora, utiliza el ":enfocar"Pseudo selector a lo largo del elemento del botón, que se utiliza para aplicar el estilo en el elemento seleccionado cuando el usuario está dirigido por el teclado o enfocado por el mouse:

Botón: Focus
color de fondo: azul;

En este escenario, el "color de fondo"Se usa con los valores establecidos como"azul".

Has aprendido el método para diseñar el botón haciendo clic en CSS.

Conclusión

Para peinar el botón hecho en CSS, primero, cree un botón en HTML con la ayuda del "" elemento. Luego, acceda a los pseudo selectores del botón, como ": hover "y": enfoque"Y aplique propiedades CSS, que incluyen"altura "," ancho "," filtrar "," color de fondo", y muchos más. Esta publicación se trataba de diseñar el botón haciendo clic en CSS.