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.

Botón flotante en esquina – Insertado con JavaScript

Las propiedades CSS

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 derecha
  • bottom: distancia que existe con la parte inferior

Con 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.

Creación e inserción del botón

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.

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.

Puedes ver el resultado en este enlace.


Relacionado:  Cargar sitios web de manera instantánea con instant.page

Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 707 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: