En esta corta entrada te mostraré cómo insertar un botón flotante en una esquina de la página web, usando JavaScript. Es decir, crear el botón de manera dinámica y colocarlo en una de las esquinas, de manera que se vea que “flota” y que está fijo.
Antes de pasar a la creación del botón, debemos repasar su estilo. Además de los colores y detalles del botón, necesitamos ciertos parámetros.
position
: la posición del botón, que en este caso será fixed
. Así, estará siempre en la esquina sin importar si hacemos scroll.z-index
: el valor en el índice z para que se muestre sobre otros elementos. Entre mayor sea el valor, más al frente se va a mostrar.right
: distancia que tiene con la parte derechabottom
: distancia que existe con la parte inferiorCon las anteriores propiedades situamos el botón en la esquina inferior derecha. Puedes usar top
y left
además de ellas, para colocarlo en otra esquina.
También puedes agregar otros estilos o clases al botón; al final es un elemento más del DOM.
A continuación creamos el botón y lo insertamos. Al ejecutar el código, veremos un botón fijo y flotante. Recuerda que, como cualquier elemento, puedes agregar listeners.
const boton = document.createElement("button");
boton.innerHTML = "Click aquí";
boton.style = "bottom:10px;right:10px;position:fixed;z-index:9999;"
document.body.appendChild(boton);
Creamos el botón, después definimos su HTML interno que será el texto o HTML mostrado en el botón. Definimos el estilo y finalmente lo agregamos al cuerpo.
En este post te enseñaré a imprimir la letra ñ en una impresora térmica. Voy…
En este post te quiero compartir mi experiencia tramitando un acta de nacimiento de México…
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Esta web usa cookies.