Cómo crear un botón HTML que actúe como un enlace
En HTML, el componente del botón realiza ciertas actividades, como un botón de enlace que se puede usar para navegar a la otra página de acuerdo con la necesidad. Además, con la ayuda de CSS, los usuarios pueden cambiar el tamaño del botón, la forma, el color, el ancho, la altura y muchos otros aspectos. El botón se puede diseñar con múltiples propiedades de acuerdo con la necesidad.
Este blog demostrará las instrucciones para crear un botón HTML que actúa como un enlace.
Cómo crear un botón HTML que actúe como un enlace?
Consulte el procedimiento mencionado a continuación para crear un botón de enlace HTML.
Paso 1: crear un DIV
En el cuerpo HTML principal, cree un contenedor DIV y especifique el nombre de la clase como "del área de BTN".
Paso 2: Crear enlace para el botón
A continuación, defina el "a"Etiqueta y el"href"Elemento, que indica la URL de destino donde se navegará al usuario después de hacer clic en el botón.
Paso 3: Asignar clase de botón
Ahora, cree un botón y especifique su clase. Por ejemplo, defina la clase de botón como "botón de enlace"Y agregue el texto entre"botón"Etiquetas como hemos agregado"Visita Linuxhint".
Después de configurar el botón, cierre el "" y ""Etiquetas.
Aquí está el bloque de código para el escenario discutido:
Ahora, avanza hacia adelante para diseñar el botón.
Cómo diseñar un botón con CSS que actúa como un enlace?
Para peinar un botón con CSS que actúa como un enlace, verifique las instrucciones dadas.
Paso 1: Button de estilo de estilo
Estilizar el botón definiendo los siguientes atributos en el "botón de enlace" clase:
-
- El "color de fondo"La propiedad se utiliza para especificar el color como"sopa de mariscos".
- Establecer el relleno como "10px", Que se utiliza para ajustar el espacio de la celda.
- El radio fronterizo se establece como "8px"Para redondear las esquinas del borde exterior del elemento.
- La bandeja de caja se establecerá como "1px, 2px, 1px, 2px"Con el color"gris".
- Establezca la propiedad de margen como "5px " para espaciado superior y de botones y "100px"Para el espacio derecho e izquierdo.
- El borde se establece como "1px Solid #CE7777":
.Button de enlace
Color de fondo: Bisque;
relleno: 10px;
Border-Radius: 8px;
Shadow de caja: 1px 2px 1px 2px gris;
margen: 5px 100px;
borde: 1px sólido #ce7777;
Paso 2: Establecer el ancho del botón
".del área de BTN"La clase se usa para acceder al contenedor DIV que establecerá el ancho del botón como"500px"Y margen de propiedad como"auto"Que ajusta automáticamente el margen alrededor del área del botón:
.área btn
Ancho: 500px;
margen: auto;
Se puede observar que el botón se ha diseñado con éxito:
Hemos explicado el método para crear y diseñar el botón HTML que actúa como un enlace.
Conclusión
Para crear un botón HTML que actúe como un enlace, en primer lugar, cree un contenedor DIV y especifique la clase con el nombre. A continuación, defina el ""Etiqueta junto con el"href"Atributo para incrustar el enlace. Luego, cree un botón y asigne la clase y el nombre del botón. Después de eso, diseñe el botón de enlace aplicando propiedades CSS a las clases definidas. Esta publicación ha demostrado el enfoque más simple para crear un botón HTML que actúa como un enlace.