Si busca dirigir a los visitantes de su página web hacia una acción específica, aprender a crear un botón en HTML con un enlace es una habilidad invaluable. Un solo clic en un botón puede ser suficiente para llevar a los usuarios a donde usted desee.
Indice De Contenidos
¿Cómo hacer un botón en html con link?
Los botones con enlaces son comunes en la web. Al visitar sitios, es probable que haya visto botones que dicen «haz clic aquí», «leer más» o «sígueme«, entre otros. Estos botones guían a los usuarios hacia una página de exhibición de productos, una página de registro, o cualquier otro lugar de su elección.
Esta herramienta esencial le proporciona el control sobre la experiencia del usuario, y es por eso que aprender a crear un botón en HTML con un enlace puede ser útil. HTML es el lenguaje en el que se escriben las páginas web y puede usarse para enlazar a otros sitios según sus necesidades.
Ahora bien, antes de profundizar, es útil entender qué es un botón y cómo se utilizan HTML y CSS en su creación.
Botón con HTML Y CSS
Un botón es un enlace, generalmente diseñado para llamar la atención, que guía a los usuarios a una dirección específica en su sitio web. Crear un botón en HTML con un enlace puede parecer una tarea desalentadora al principio, pero en realidad, es bastante simple. Es un proceso similar a crear un enlace HTML, pero con la adición de estilo CSS.
¿Qué es un enlace?
Un enlace, o hipervínculo, es una conexión entre dos documentos. Es una característica fundamental de la web que permite a los usuarios navegar de una página a otra o de un sitio a otro, simplemente con un clic del ratón. Los enlaces pueden ser de dos tipos:
- Enlace externo: Es la dirección URL de un recurso ubicado en otro sitio web.
- Enlace interno: Es la dirección de un recurso ubicado en el mismo sitio web.
Ambos tipos de enlaces son cruciales para la funcionalidad y la estructura de su sitio web. Los enlaces internos ayudan a los usuarios a navegar por su sitio web, mientras que los enlaces externos pueden proporcionar información adicional o dirigir a los usuarios a sus otros proyectos o redes sociales
¿Qué es el texto de anclaje?
El texto de anclaje es el texto visible que los usuarios ven y en el que pueden hacer clic para seguir un enlace. En otras palabras, es el texto comprendido entre las etiquetas de apertura y cierre de un hipervínculo en HTML. Cuando el hipervínculo se refiere a un objeto multimedia, como una imagen, el texto de anclaje puede no ser necesario, ya que la propia imagen puede funcionar como el «texto» de anclaje.
Creando un enlace
Para crear un hipervínculo en HTML, utilizaremos la etiqueta de anclaje ‘<a>’, y la dirección de destino se especifica mediante el atributo ‘href’, que significa Hypertext REFerence.
Aquí tienes un ejemplo de cómo se vería el código:
<a href="https://ejemplo.com/">Mi Botón</a>
Como puedes ver, este es un enlace simple compuesto por la etiqueta de anclaje ‘<a>’ y el atributo ‘href=’, que indica la página web a la que se dirigirá el usuario al hacer clic en el enlace.
Cómo crear un enlace externo
Crear un enlace a otro sitio web también implica el uso de la etiqueta de anclaje, pero deberás incluir la URL completa del sitio web de destino, lo que incluye el protocolo (por ejemplo, HTTP, HTTPS), el dominio y la ruta de la página específica a la que quieres enlazar.
Es esencial especificar el protocolo de internet del recurso de destino cuando se crea un enlace externo. Los protocolos de internet comúnmente utilizados para las páginas web son HTTP (Protocolo de Transferencia de Hipertexto) y HTTPS (Protocolo de Transferencia de Hipertexto Seguro). HTTPS es una versión segura de HTTP, y es el protocolo que se utiliza generalmente para sitios web que manejan información sensible, como contraseñas y números de tarjeta de crédito.
Aquí tienes un ejemplo de un enlace externo en HTML:
<a href="https://otrodominio.com/pagina.html">Texto de Anclaje</a>Aplicamos una clase al enlace
Si desea personalizar su botón en HTML con un enlace, una de las mejores formas de hacerlo es aplicar una clase al enlace. Las clases en HTML son identificadores que se pueden usar para definir características y estilos específicos a través de CSS para uno o más elementos HTML. Al asignar la misma clase a varios elementos, puede aplicar el mismo estilo a todos esos elementos simultáneamente.
Aquí le mostramos cómo aplicar una clase a su enlace:
<a class="miboton-personalizado" href="https://pinguinodigital.com/">Mi Botón</a>
En este ejemplo, ‘miboton-personalizado’ es el nombre de la clase que se ha asignado al enlace. Ahora puede definir el estilo de esta clase utilizando CSS.
A continuación, le mostramos un ejemplo de cómo podría hacerlo:
.miboton-personalizado {
background-color: #4CAF50; /* Verde */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
En este ejemplo de CSS, todos los elementos HTML con la clase ‘miboton-personalizado’ tendrán un fondo verde, el texto en blanco, un relleno específico, y se mostrarán como un bloque en línea, entre otras características. De esta forma, puede personalizar la apariencia de sus botones y otros elementos en su sitio web.
Vamos al personalizador de CSS
Si desea que su botón en HTML parezca un texto normal en lugar de un botón típico, puede hacerlo utilizando CSS. Los navegadores suelen resaltar los botones para indicar a los usuarios que son interactivos. Sin embargo, puede modificar esta apariencia predeterminada eliminando el fondo y los bordes del botón.
- .textLike {
- background: transparent;
- border: none;
- padding: 0;
- }
Además, para indicar a los usuarios que el texto es interactivo, puede cambiar el cursor al pasar el ratón por encima del texto. Esto se logra con la siguiente regla CSS:
.textLike:hover {
cursor: pointer;
}
Con este código, el cursor cambiará a la forma de mano cuando el usuario pase el ratón sobre el texto, indicando que el texto es un enlace o botón interactivo.
Ahora, si desea crear botones personalizados y aplicarles un efecto al pasar el cursor, puede hacerlo utilizando la etiqueta <input> de HTML y estilizando su apariencia con CSS.
A continuación, un ejemplo de cómo crear un botón utilizando HTML:
<input type="button" id="myBtn" name="myBtn" class="myBtn" value="¡Haz clic en mí!">
En este caso, hemos creado un botón utilizando la etiqueta <input> con el atributo type establecido en «button». También hemos asignado un id, un name y una class al botón, y hemos establecido el texto del botón utilizando el atributo value. Ahora puede estilizar este botón utilizando CSS y la clase «myBtn».
¿En el caso del botón en html?
Le explicamos cómo crear un botón en html con link, y para empezar debemos usar el elemento input y darle un «tipo», elegir el más adecuado; no vamos a entrar en detalles, pero solo pensar que el tipo «enviar» se usa solo en formularios, lo mismo es cierto para restablecer, mientras que para todo lo demás se usa el «botón».
Continuando encontramos los campos «id» y «name», los usamos para especificar el input, de esta manera podemos usarlo vía javascript, variable $ _POST y darle un estilo con el css, su declaración no es obligatoria pero intente poner al menos el id si la página contiene más botones y quieres darle un estilo diferente.
El campo «clase», el que creemos que no es lo suficientemente explotado por quienes son principiantes, creyendo que los otros campos son más importantes, funciona exactamente como el id y a diferencia de todos los demás puede contener más valores.
Tomemos un ejemplo simple de entender mejor
Si tenemos una clase configurada como esta: class = «button button-menu», nuestro botón estará sujeto al CSS relacionado con la clase del botón más el botón-menú, de esta manera, con el primero podemos configurar el estilo genérico para todos los botones del sitio, y podemos escribir uno separado para los que se encuentran dentro del menú.
El atributo «valor», a diferencia de los otros botones, debe establecerse porque su valor se mostrará encima del botón.
Finalmente, para el registro, tenemos el atributo disabled, para ser usado solo si queremos mostrar la entrada pero sin dar la posibilidad de usarla.
Resumiendo esto es el mínimo requerido
- <input type = «button» value = «¡haz clic en mí!»>
Hagamos que el CSS interactúe con nuestros botones
En realidad, estas son las formas de diseñar todos los elementos html
- #id_pulsante {}
- .classe_pulsante {}
- botón {}
- input [type = «button»] {}
Los dos últimos enumerados se refieren de manera general, si los usa asegúrese de poner solo cosas dentro que puedan ajustarse a todos los elementos del botón, así que cosas como color, borde, entre otras
También podemos combinarlos entre sí obteniendo resultados como
- botón #menu_button {} o todavía usa los elementos principales
- sección div # contenedor de entrada [tipo = ”botón”] {}
Botones de html y css ejemplos
Gracias a CSS usted puede aplicar diversas características a sus botones, como tamaño, forma, color, relleno, y muchos más, por eso cuando aprenda cómo hacer un botón en html con link, debe utilizar estos que le mostramos a continuación.
- text-decoration: quita el estilo de enlace
- font-weight: colocarle negritas al botón
- font-size: tamaño del texto
- color: color del texto
- padding-top: relleno superior
- padding-bottom: relleno inferior
- padding-left: relleno izquierdo
- padding-right: relleno derecho
- background-color: color de fondo
- border-width: ancho del borde
- border-color: color del borde
- border-radius: redondeo del botón
- border-style: el estilo del borde
Botón Rectangular
Como su nombre lo indica, se trata de un botón de forma rectangular, y para poder crearlo este es el código que debe emplear
- crear-boton-azul-con-css
- .boton-personalizado {
- text-decoration:none;
- font-weight:600;
- font-size:20px;
- color:#ffffff;
- padding-top:20px;
- padding-bottom:20px;
- padding-left:40px;
- padding-right:40px;
- background-color:#005BBB;
- }
Efecto Hover en el Botón
También conocido como efectos de clic y desplazamiento. Un botón que se precie no solo debe tener hermosos gráficos cuando está en reposo, sino también durante las interacciones del usuario, haciendo que su experiencia sea un poco más interactiva.
Estas son las principales formas de acceder a nuestro elemento flotar, escuchar flotar; y activo, al hacer clic
- .boton-personalizado-2 {
- text-decoration:none;
- font-weight:600;
- font-size:20px;
- color:#ffffff;
- padding-top:15px;
- padding-bottom:15px;
- padding-left:150px;
- padding-right:150px;
- background-color:#FFD27D;
- }
- /* mira cómo cambia el diseño al pasar el cursor sobre el boton*/
- .boton-personalizado-2:hover {
- background-color:#000000;
- }
Botón Rectangular Largo
Tiene un ustilo similar al apartado anterior, pero más largo para aumentar su visibilidad, y su código de creación es el siguiente
crear-un-boton-con-css
- .boton-personalizado-2 {
- text-decoration:none;
- font-weight:600;
- font-size:20px;
- color:#ffffff;
- padding-top:15px;
- padding-bottom:15px;
- padding-left:150px;
- padding-right:150px;
- background-color:#FFD27D;
- }
Botón con borde
Seguramente ha podido ver esos botones que parecieran estar en 3D, y es porque se le ha codificado para aplicarle un borde, el cual puede ser de puntos, de diversos colores, o como mejor te parezca.
crear-boton-con-borde-con-css
- .boton-personalizado-3 {
- text-decoration:none;
- font-weight: 600;
- font-size: 20px;
- color:#ffffff;
- padding-top:15px;
- padding-bottom:15px;
- padding-left:40px;
- padding-right:40px;
- background-color:#f2595e;
- border-color: #F69DA1;
- border-width: 3px;
- border-style: solid;
- }
Botón con borde redondeado
Esta es una variación del botón con borde, solo que sus esquinas están ligeramente redondeadas, por lo que puede notar al usarlo, que cambia un poco su apariencia. Cuando está aprendiendo cómo hacer un botón en html con link, es necesario que no tenga miedo, y realice todas las pruebas necesarias, hasta dar con el resultado que más le guste.
boton-con-esquinas-redondeadas
- .boton-personalizado-4 {
- text-decoration:none;
- font-weight: 600;
- font-size: 20px;
- color:#333333;
- padding-top:15px;
- padding-bottom:15px;
- padding-left:40px;
- padding-right:40px;
- background-color:#FFD27D;
- border-color: #d8d8d8;
- border-width: 3px;
- border-style: solid;
- border-radius:35px;
- }
Botón fantasma
Este botón tiene una apariencia transparente, por lo que se puede ver a través de ellos, lo que hay debajo de él. No está decir que esta es una idea genial para crear los botones de su sitio.
- boton-fantasma-css
- boton-transparente-css
- .boton-personalizado-5 {
- text-decoration:none;
- font-weight: 600;
- font-size: 20px;
- color:#000000;
- padding-top:15px;
- padding-bottom:15px;
- padding-left:40px;
- padding-right:40px;
- background-color: transparent;
- border-width: 3px;
- border-style: solid;
- border-color: #000000;
- }
Jugar con los botones
Crear botones atractivos y funcionales en HTML puede ser una tarea interesante y creativa. Los botones son un elemento esencial en cualquier sitio web, ya que permiten al usuario interactuar con la página de diversas maneras.
Para que un botón sea llamativo y efectivo, debe tener en cuenta varios aspectos. Primero, asegúrese de que el diseño y los colores del botón se alineen con la estética general de su sitio web. También puede ser útil jugar con diferentes tamaños y formas para crear un diseño que sea atractivo y fácil de usar.
Asegúrate de que el texto del botón sea claro y descriptivo. Esto facilitará a los usuarios entender qué acción se realizará cuando hagan clic en el botón.
Los colores son una parte crucial del diseño de los botones. Si no encuentras un color que se ajuste a tus necesidades, puedes ajustar el color hasta obtener el tono exacto que buscas. Puedes utilizar una herramienta de selección de colores o referencias de colores CSS para esto.
Recomendaciones
Recuerda, la simplicidad a menudo es la clave de un diseño efectivo. Un diseño simple y limpio puede ser más atractivo y fácil de usar que uno complicado y abarrotado.
Si prefieres una opción más sencilla, hay varias herramientas en línea que pueden ayudarte a generar el CSS para tus botones. Sitios web como CSS3 Button Generator o Best CSS Button Generator te permiten personalizar el diseño de tus botones y generan el código CSS que puedes copiar y pegar en tu sitio web.
Una vez que hayas diseñado tu botón y estés satisfecho con su apariencia, puedes usar la etiqueta <button> en HTML para agregar el botón a tu sitio web. También puedes agregar un enlace al botón envolviéndolo con una etiqueta <a>.
Por ejemplo, para crear un botón que dirija a los usuarios a otra página, puedes usar el siguiente código:
<a href="https://www.pinguinodigital.com">
<button type="button" class="button button-menu">Visítanos</button>
</a>
En este caso, el botón dirá «Visítanos» y cuando el usuario haga clic en él, será redirigido a «https://www.pinguinodigital.com».
Crear botones atractivos y efectivos en HTML es una habilidad valiosa que puede mejorar la apariencia y funcionalidad de tu sitio web. Con práctica y creatividad, puedes diseñar botones que atraigan a los usuarios y les ayuden a interactuar con tu sitio de manera efectiva.
Si le ha gustado esta lectura, también le podemos recomendar