Crea Botones Profesionales en HTML que Abran Enlaces en Otra Pestaña

by 
Como crear botones atractivos y que abran en una nueva pestaña
Si tienes un sitio web y deseas mejorar la navegación de tus usuarios, es importante asegurarte de que ciertos enlaces se abran en una nueva pestaña del navegador. Esto es útil cuando diriges a los visitantes a una plataforma externa, como un demo o una página de compra, sin que abandonen tu web.

Código para Botones que Abren en Nueva Pestaña

A continuación, te mostramos un fragmento de código HTML que incluye dos botones: uno para ingresar a un demo y otro para solicitar una compra. Cada enlace ha sido configurado con el atributo target="_blank" para abrirse en una nueva pestaña.
Copia y pega este código en la sección de la entrada donde quieres que aparezca el botón
<div style="text-align: center; margin-top: 20px;">

<a style="background: #28a745; color: white; padding: 12px 18px; font-size: 16px; font-weight: bold; text-decoration: none; border-radius: 5px; display: block; width: 80%; max-width: 300px; margin: 10px auto; text-align: center; transition: 0.3s ease-in-out; box-shadow: 0 4px 8px rgba(0,0,0,0.2);" href="https://demoescuela.techinnovate.pro/login/index.php" target="_blank" rel="noopener"><img class="emoji" role="img" draggable="false" src="https://s.w.org/images/core/emoji/15.0.3/svg/1f680.svg" alt="🚀" /> Ingresar al DEMO</a>

<a style="background: #007bff; color: white; padding: 12px 18px; font-size: 16px; font-weight: bold; text-decoration: none; border-radius: 5px; display: block; width: 80%; max-width: 300px; margin: 10px auto; text-align: center; transition: 0.3s ease-in-out; box-shadow: 0 4px 8px rgba(0,0,0,0.2);" href="https://wa.link/7g2pwi" target="_blank" rel="noopener"><img class="emoji" role="img" draggable="false" src="https://s.w.org/images/core/emoji/15.0.3/svg/1f6d2.svg" alt="🛒" /> Solicitar Compra</a>

</div>

Muestra del Resultado

Tal ves quieras saber: Cómo Optimizar tu Sitio Web

Explicación del Código

  • Etiqueta <a>: Se utiliza para crear enlaces en HTML.
  • Atributo href: Define la URL a la que se dirigirá el usuario al hacer clic.
  • Atributo target="_blank": Permite que el enlace se abra en una nueva pestaña en lugar de la misma.
  • Estilos en línea (style): Se usa CSS para dar un diseño atractivo a los botones, como color de fondo, tamaño del texto, bordes redondeados y efecto de sombra.

Beneficios de Usar target="_blank"

  1. Evitas que los usuarios abandonen tu sitio: Al abrir los enlaces en una nueva pestaña, permites que los visitantes sigan explorando tu contenido sin interrupciones.
  2. Mejoras la navegación: Esto es especialmente útil para enlaces externos, como documentos de Google Drive o formularios de compra.
  3. Experiencia de usuario mejorada: Los usuarios pueden consultar el contenido sin perder la página original en la que estaban.

Conclusión

Si quieres mejorar la usabilidad de tu sitio web, asegúrate de usar target="_blank" en los enlaces que llevan a plataformas externas o recursos importantes. Además, el diseño de botones atractivos con CSS hará que tu web luzca más profesional y funcional.¡Implementa este código en tu sitio y mejora la experiencia de navegación hoy mismo! 🚀

Leave a Comment