Como hacer Botones Adaptables (Responsive) a los Dispositivos con JavaScript y CSS

4 minuto(s)

Demo Github

En ocasiones necesitamos que nuestros botones se adapten a los dispositivos móviles para mejorar la experiencia de los usuarios. Anteriormente realice el Post llamado Como hacer Botones Adaptables (Responsive) a los Dispositivos con Bootstrap 4 y jQuery 3.4.1, pero ya que las versiones de Bootstrap y jQuery suelen cambiar, en este Post te enseñare a Como hacer Botones Adaptables (Responsive) a los Dispositivos con JavaScript y CSS, es decir sin hacer uso de algun framework o librería, con puro CSS y Javascript, vamos con ello.

Antes de continuar con este Post, te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Con Que Lenguaje De Programación Comenzar Para El Desarrollo Web” “5 Habilidades que Debe Tener un Desarrollador Backend” (Anchor Podcast)

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Bien ahora continuemos con el Post: Como hacer Botones Adaptables (Responsive) a los Dispositivos con JavaScript y CSS.

Como hacer Botones Adaptables (Responsive) a los Dispositivos con JavaScript y CSS

Primero crearé 3 botones HTML para este ejemplo:


En el código anterior, puedes ver que le he agregado el nombre de clase miboton a los 3 botones HTML.

Ahora en mi código CSS le asignaré algunas propiedades a la clase .miboton, asimismo crearé 3 clases llamadas .btn-chico, .btn-mediano y .btn-grande, estas 3 clases cambiarán segun el tamaño de pantalla del dispositivo. 


Por último mediante JavaScript detecto el ancho de la pantalla y según ello le asigno una clase a mis botones.

Nota: Tu Puedes colocar más medidas o anchos de pantallas en el código JavaScript, adaptalo a tus necesidades.

Entonces en una ventana inicial del navegador, los botones se verían así:

Si el ancho de la ventana del navegador es menor que 1200 px de ancho, los botones se verían así:

Si el ancho de la ventana del navegador es menor que 900 px de ancho, los botones se verían así:


Si el ancho de la ventana del navegador es menor que 768 px de ancho, los botones se verían así:

El truco en el CSS es usar width: calc(50% – 20px); y el botón se adaptará al ancho del dispositivo.

Conclusión

Hemos creado botones responsives o adaptables a los dispositivos móviles, todo con CSS, HTML y puro JavaScript. Tu puedes adaptar el código del proyecto a tus necesidades.

Nota (s)

  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.