0

tengo un pequeño problema, estoy empezando en el desarrollo web, y quería aprender JavaScript, lo que pasa es que no encuentro la forma de hacer que un botón se quede presionado con un solo clic, incluso cuando deje de darle clic, ayuda porfa.

2
  • 1
    Bienvenido Yoshimitsu! Te recomiendo que te des una vuelta por el recorrido, si lo completas todo ganarás tu primera medalla. También echa un vistazo a cómo preguntar, por favor, edita tu pregunta y añade lo que llevas/has intentado hasta ahora para que la comunidad pueda ayudarte de una mejor manera! (has esto editando tu pregunta).
    – FranAcuna
    el 15 abr. 2021 a las 23:14
  • Como te indica @FranAcuna, nos sería útil disponer de más información para poder responder tu pregunta. Así, sin contexto ni código solo podemos especular, pero parece que estás buscando un efecto que se logra gobernando la clase CSS del botón desde el script JS.
    – Sokkian
    el 16 abr. 2021 a las 6:44

2 respuestas 2

2

Como han dicho más arriba lo mejor es un toggle switch button. Con un poco de html y css quedan cosas chulas como ésta:

  .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
    }
    
    
    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    
   
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
    }
    
    .slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
    }
    
    input:checked + .slider {
      background-color: #2196F3;
    }
    
    input:focus + .slider {
      box-shadow: 0 0 1px #2196F3;
    }
    
    input:checked + .slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }
    
  
    .slider.round {
      border-radius: 34px;
    }
    
    .slider.round:before {
      border-radius: 50%;
    }
<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

1

Yo creo que en realidad quieres un checkbox pintado como botón.

Este ejemplo se vale de bootstrap, pero además le cambio el texto según el estado. Todo esto es con CSS solamente.

.btn-check {
  width:100px;
   height:30px;
}
.btn-check+.btn-outline-primary:before {
  content:'In';
  width:100px;
  height:30px;
}

.btn-check:checked+.btn-outline-primary:before {
  content:'  ';  
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<div class="m-2">
<p><input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Activo</label><br>
</p></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.