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

4 minuto(s)

En esta página:

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” y “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:


<div class="contenedor">
  <button class="miboton">Botón 1</button>
  <button class="miboton">Botón 2</button>
  <button class="miboton">Botón 3</button>
</div>

<button class="miboton">Botón 1</button>

<button class="miboton">Botón 2</button>

<button class="miboton">Botón 3</button>

</div>

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.


.miboton {
    background-color: #525251!important;
    border-radius: 5px;
    font-size: 17px;
    font-family: 'Source Sans Pro', sans-serif;
    padding: 6px 18px;
    border: inherit;
    
}

.miboton, .btn-chico, .btn-mediano, .btn-grande, .miboton:link, .miboton:visited {
    color: #FFFFFF;
    background-color: #525251;
}

.btn-chico {
    font-size: 1rem;
    display: inline-block;
    width: calc(50% - 20px);
    padding: 10px;
    margin: 10px;
    background-color: #5d6bea!important;
    border-radius: 5px;    
    font-family: 'Source Sans Pro', sans-serif;
    padding: 6px 18px;
}

.btn-mediano {
    font-size: 1rem;
    display: inline-block;
    width: calc(50% - 20px);
    padding: 10px;
    margin: 10px;
    background-color: #79dd74!important;
    border-radius: 5px;    
    font-family: 'Source Sans Pro', sans-serif;
    padding: 6px 18px;
} 

.btn-grande {
    font-size: 1rem;
    display: inline-block;
    width: calc(50% - 20px);
    padding: 10px;
    margin: 10px;
    background-color: #525251!important;
    border-radius: 5px;    
    font-family: 'Source Sans Pro', sans-serif;
    padding: 6px 18px;
}

.miboton {

background-color: #525251!important;

border-radius: 5px;

font-size: 17px;

font-family: 'Source Sans Pro', sans-serif;

padding: 6px 18px;

border: inherit;

}

.miboton, .btn-chico, .btn-mediano, .btn-grande, .miboton:link, .miboton:visited {

color: #FFFFFF;

background-color: #525251;

}

.btn-chico {

font-size: 1rem;

display: inline-block;

width: calc(50% - 20px);

padding: 10px;

margin: 10px;

background-color: #5d6bea!important;

border-radius: 5px;

font-family: 'Source Sans Pro', sans-serif;

padding: 6px 18px;

}

.btn-mediano {

font-size: 1rem;

display: inline-block;

width: calc(50% - 20px);

padding: 10px;

margin: 10px;

background-color: #79dd74!important;

border-radius: 5px;

font-family: 'Source Sans Pro', sans-serif;

padding: 6px 18px;

}

.btn-grande {

font-size: 1rem;

display: inline-block;

width: calc(50% - 20px);

padding: 10px;

margin: 10px;

background-color: #525251!important;

border-radius: 5px;

font-family: 'Source Sans Pro', sans-serif;

padding: 6px 18px;

}

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


if (window.screen.width < 768) {

    var list;
    list = document.querySelectorAll(".miboton");
    for (var i = 0; i < list.length; ++i) {
        list[i].classList.add('btn-chico');
    }

    console.log('Ventana Menor que 768px');

}
else if (window.screen.width < 900) {

    var list;
    list = document.querySelectorAll(".miboton");
    for (var i = 0; i < list.length; ++i) {
        list[i].classList.add('btn-mediano');
    }

    console.log('Ventana Menor que 900px');

}
else if (window.screen.width < 1200) {

    var list;
    list = document.querySelectorAll(".miboton");
    for (var i = 0; i < list.length; ++i) {
        list[i].classList.add('btn-grande');
    }

    console.log('Ventana Menor que 1200px');
    
}

if (window.screen.width < 768) {

var list;

list = document.querySelectorAll(".miboton");

for (var i = 0; i < list.length; ++i) {

list[i].classList.add('btn-chico');

}

console.log('Ventana Menor que 768px');

}

else if (window.screen.width < 900) {

var list;

list = document.querySelectorAll(".miboton");

for (var i = 0; i < list.length; ++i) {

list[i].classList.add('btn-mediano');

}

console.log('Ventana Menor que 900px');

}

else if (window.screen.width < 1200) {

var list;

list = document.querySelectorAll(".miboton");

for (var i = 0; i < list.length; ++i) {

list[i].classList.add('btn-grande');

}

console.log('Ventana Menor que 1200px');

}

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.