Como é que se cria um botão de comutação?

quero criar um botão de comutação em html, usando o css. Eu quero-o para que quando você clicar nele, ele fica empurrado para dentro e do que quando você clicar nele novamente ele sai.

Se não houver nenhuma maneira de fazê-lo apenas usando css. Há alguma maneira de o fazer usando jQuery?

Author: Donny V., 2008-11-21
Source

15 answers

A boa forma semântica seria usar uma caixa de cheques, e depois usá-la de formas diferentes, se estiver assinalada ou não. Mas não há boas maneiras de o fazer. Você tem que adicionar espaço extra, div extra, e, para um olhar realmente bom, adicionar algum javascript.

Então a melhor solução é usar uma pequena função jQuery e duas imagens de fundo para estilizar os dois estados diferentes do botão. Exemplo com um efeito para cima/para baixo dado por fronteiras: 

$(document).ready(function() {
  $('a#button').click(function() {
    $(this).toggleClass("down");
  });
});
a {
  background: #ccc;
  cursor: pointer;
  border-top: solid 2px #eaeaea;
  border-left: solid 2px #eaeaea;
  border-bottom: solid 2px #777;
  border-right: solid 2px #777;
  padding: 5px 5px;
}

a.down {
  background: #bbb;
  border-top: solid 2px #777;
  border-left: solid 2px #777;
  border-bottom: solid 2px #eaeaea;
  border-right: solid 2px #eaeaea;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="button" title="button">Press Me</a>

Obviamente, você pode adicionar imagens de fundo que representam botão para cima e botão para baixo, e tornar a cor de fundo transparente.

 87
Author: alexmeia, 2017-09-24 16:03:41

JQuery UI faz a luz trabalhar para criar botões de comutação. Põe isto. 

<label for="myToggleButton">my toggle button caption</label>
<input type="checkbox" id="myToggleButton" />

Na sua página e depois no seu corpo onLoad ou na sua função $.ready() (ou em alguns objectos literais init() se construir um sítio ajax..) deixe cair um pouco de JQuery assim: 

$("#myToggleButton").button()
É isso. (don't forget the < label for=...> because JQueryUI uses that for the body of the toggle button..) A partir daí você só trabalha com ele como qualquer outro porque isso é o que o controle subjacente ainda é mas O JQuery UI só o esfola para parecer um botão de comutação bonito no ecrã.
 49
Author: bkdraper, 2016-07-21 13:02:01

Aqui está um exemplo usando pure css:

  .cmn-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
  }
  .cmn-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
  }
  input.cmn-toggle-round + label {
    padding: 2px;
    width: 120px;
    height: 60px;
    background-color: #dddddd;
    border-radius: 60px;
  }
  input.cmn-toggle-round + label:before,
  input.cmn-toggle-round + label:after {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    content: "";
  }
  input.cmn-toggle-round + label:before {
    right: 1px;
    background-color: #f1f1f1;
    border-radius: 60px;
    transition: background 0.4s;
  }
  input.cmn-toggle-round + label:after {
    width: 58px;
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: margin 0.4s;
  }
  input.cmn-toggle-round:checked + label:before {
    background-color: #8ce196;
  }
  input.cmn-toggle-round:checked + label:after {
    margin-left: 60px;
  }
<div class="switch">
  <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
  <label for="cmn-toggle-1"></label>
</div>
 22
Author: simple_human, 2014-11-28 04:12:33

Em combinação com esta resposta, Você também pode usar este tipo de estilo que é como o Toggler de configuração móvel.

togglers

HTML

<a href="#" class="toggler">&nbsp;</a>
<a href="#" class="toggler off">&nbsp;</a>
<a href="#" class="toggler">&nbsp;</a>

CSS

a.toggler {
    background: green;
    cursor: pointer;
    border: 2px solid black;
    border-right-width: 15px;
    padding: 0 5px;
    border-radius: 5px;
    text-decoration: none;
    transition: all .5s ease;
}

a.toggler.off {
    background: red;
    border-right-width: 2px;
    border-left-width: 15px;
}

JQuery

$(document).ready(function(){
    $('a.toggler').click(function(){
        $(this).toggleClass('off');
    });
});
Pode ser muito mais bonita, mas dá a ideia.
Uma vantagem é que ele pode ser animado com jquery e / ou CSS3
Fiddler
 19
Author: Pierre de LESPINAY, 2017-05-23 12:32:33
Se quiser um botão apropriado, precisa de javascript. Algo assim (precisa de algum trabalho no estilo, mas você começa o gist). Não me daria ao trabalho de usar o jquery para algo tão trivial para ser honesto. 
<html>
<head>
<style type="text/css">
.on { 
border:1px outset;
color:#369;
background:#efefef; 
}

.off {
border:1px outset;
color:#369;
background:#f9d543; 
}
</style>

<script language="javascript">
function togglestyle(el){
    if(el.className == "on") {
        el.className="off";
    } else {
        el.className="on";
    }
}
</script>

</head>

<body>
<input type="button" id="btn" value="button" class="off" onclick="togglestyle(this)" />
</body>
</html>
 7
Author: monkey do, 2008-11-21 16:09:25

Podes usar toggleClass() para localizar o estado. Então você verifica se o elemento botão tem a classe, assim: 

$("button.toggler").click( function() {
    $me = $(this);
    $me.toggleClass('off');
    if($me.is(".off")){
        alert('hi');
    }else {
        alert('bye');
    }
});

E eu uso o elemento button para botões por razões semânticas.

<button class="toggler">Toggle me</button>
 4
Author: tim, 2013-10-30 00:32:17

Poderá usar um elemento de âncora (<a></a>) e usar uma ligação a: Activa e a: para mudar a imagem de fundo para activar ou desactivar. Só uma ideia.

Editar: o método acima não funciona muito bem para comutar. Mas não precisas de usar o jquery. Escreva uma simples função onClick javascript para o elemento, que altera a imagem de fundo apropriadamente para fazer parecer que o botão é pressionado, e definir alguma bandeira. Em seguida, no próximo clique, imagem e bandeira é revertida. Comer então 

var flag = 0;
function toggle(){
if(flag==0){
    document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img1.gif";
    flag=1;
}
else if(flag==1){
    document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img2.gif";
    flag=0;
}
}

E o html assim <div id="toggleDiv" onclick="toggle()">Some thing</div>

 3
Author: anand.trex, 2008-11-21 16:12:46

Eu estaria inclinado a usar uma classe no seu css que altera o estilo de contorno ou a largura de contorno quando o botão está pressionado, para que dê a aparência de um botão de comutação.

 2
Author: Galwegian, 2008-11-21 15:20:15
Não acho que usar JS para criar um botão seja uma boa prática. E se o navegador do utilizador desactivar o JavaScript ? Além disso, pode usar uma caixa de cheques e um pouco de CSS para o fazer. E é fácil recuperar o estado da sua caixa de cheques.

Este é apenas um exemplo, mas você pode estilá-lo como quiser.

Http://jsfiddle.net/4gjZX/

HTML

<fieldset class="toggle">
  <input id="data-policy" type="checkbox" checked="checked" />
  <label for="data-policy">
  <div class="toggle-button">
    <div class="toggle-tab"></div>
  </div>
  Toggle
  </label>
</fieldset>​

CSS

.toggle label {
  color: #444;
  float: left;
  line-height: 26px;
}
.toggle .toggle-button {
  margin: 0px 10px 0px 0px;
  float: left;
  width: 70px;
  height: 26px;
  background-color: #eeeeee;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#fafafa));
  background-image: -webkit-linear-gradient(top, #eeeeee, #fafafa);
  background-image: -moz-linear-gradient(top, #eeeeee, #fafafa);
  background-image: -o-linear-gradient(top, #eeeeee, #fafafa);
  background-image: -ms-linear-gradient(top, #eeeeee, #fafafa);
  background-image: linear-gradient(top, #eeeeee, #fafafa);
  filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#eeeeee', EndColorStr='#fafafa');
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border: 1px solid #D1D1D1;
}
.toggle .toggle-button .toggle-tab {
  width: 30px;
  height: 26px;
  background-color: #fafafa;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eeeeee));
  background-image: -webkit-linear-gradient(top, #fafafa, #eeeeee);
  background-image: -moz-linear-gradient(top, #fafafa, #eeeeee);
  background-image: -o-linear-gradient(top, #fafafa, #eeeeee);
  background-image: -ms-linear-gradient(top, #fafafa, #eeeeee);
  background-image: linear-gradient(top, #fafafa, #eeeeee);
  filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#fafafa', EndColorStr='#eeeeee');
  border: 1px solid #CCC;
  margin-left: -1px;
  margin-top: -1px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-box-shadow: 5px 0px 4px -5px #000000, 0px 0px 0px 0px #000000;
  -moz-box-shadow: 5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
  box-shadow: 5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
}
.toggle input[type=checkbox] {
  display: none;
}
.toggle input[type=checkbox]:checked ~ label .toggle-button {
  background-color: #2d71c2;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#2d71c2), to(#4ea1db));
  background-image: -webkit-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: -moz-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: -o-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: -ms-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: linear-gradient(top, #2d71c2, #4ea1db);
  filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#2d71c2', EndColorStr='#4ea1db');
}
.toggle input[type=checkbox]:checked ~ label .toggle-button .toggle-tab {
  margin-left: 39px;
  -webkit-box-shadow: -5px 0px 4px -5px #000000, 0px 0px 0px 0px #000000;
  -moz-box-shadow: -5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
  box-shadow: -5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
}​
Espero que isto ajude.
 2
Author: Titouan de Bailleul, 2012-06-23 13:08:07

Tenta esta parte: 

input type="button" 
                           data-bind="css:{on:toggleButton, off:toggleButton!=true},value:toggleButton,click: function() { $data.toggleButton(!($data.toggleButton()))}" />

in viewModel
self.toggleButton = ko.observable(false);
 1
Author: Peter, 2014-01-08 10:56:01
 1
Author: Nickolay, 2017-05-23 11:54:34

Pode usar o pseudoclasse " activo "(não funcionará no IE6, no entanto, para outros elementos que não ligações) 

a:active
{
    ...desired style here...
}
 0
Author: pilsetnieks, 2008-11-21 15:37:43

Aqui está um dos exemplos / variantes (mais detalhes descritos) de ToggleButton usando jQuery com implementação <label for="input">.

Primeiro vamos criar um contentor para o nosso ToggleButton usando o HTML clássico <input> e <label>

<span>
  <input type="checkbox" value="1" name="some_feature_to_select" id="feature_cb" style="display: none;"> <!-- We can hide checkbox bec. we want <label> to be a ToggleButton, so we don't need to show it. It is used as our value holder -->
  <label for="feature_cb" id="label_for_some_feature">
    <img alt="Stylish image" src="/images/icons/feature.png">
  </label>
</span>

A seguir vamos definir a função para comutar o nosso botão. Nosso botão na verdade é o usual {[[5]} que será estilizado para representar comutação de valor.

function toggleButton(button) {

var _for = button.getAttribute('for'); // defining for which element this label is (suppose element is a checkbox (bec. we are making ToggleButton ;) )
var _toggleID = 'input#'+_for; // composing selector ID string to select our toggle element (checkbox)
var _toggle = $( _toggleID ); // selecting checkbox to work on
var isChecked = !_toggle.is(':checked'); // defining the state with negation bec. change value event will have place later, so we negating current state to retrieve inverse (next).

if (isChecked)
    $(button).addClass('SelectedButtonClass'); // if it is checked -> adding nice class to our button (<label> in our case) to show that value was toggled
else
    $(button).removeClass('SelectedButtonClass'); // if value (or feature) was unselected by clicking the button (<label>) -> removing .SelectedButtonClass (or simply removing all classes from element)
}

a função é implementada de forma reutilizável. Você pode usá-lo para mais de um, dois ou até três ToggleButtons que criou.

... e finalmente ... para que funcione como esperado, devemos ligar a função de comutação a um evento (Evento"Mudança") do nosso botão improvisado <label> (será click evento bec. não estamos alterando o checkbox diretamente, então nenhum evento pode ser disparado para <label>).

$(document).ready(function(){

    $("#some_feature_label").click(function () {
        toggleButton(this); // call function with transmitting instance of a clicked label and let the script decide what was toggled and what to do with it
    });

    $("#some_other_feature_label").click(function () {
        toggleButton(this); // doing the same for any other feature we want to represent in a way of ToggleButton
    });

});

Com o CSS podemos definir backgorund-image ou algum border para representar a mudança de valor enquanto <label> fará o trabalho por nós ao alterar o valor de uma caixa de cheques ;).

Espero que isto ajude alguém.
 0
Author: Paul T. Rawkeen, 2012-07-24 15:39:27

Tenta; 

<li>Text To go with Toggle Button<span class = 'toggle'><input type = 'checkbox' class = 'toggle' name = 'somename' id = 'someid' /></span></li>

E certifique-se de que no 

<head><link rel = 'stylesheet' src = 'theme.css'> (from jqtouch - downloadable online)
      <link rel = 'text/javascript' src = 'jquery.js'> (also from jqtouch)
</head>

Lembre-se quando estiver a codificar isto, apenas somename e someid pode mudar na etiqueta de entrada, caso contrário não funciona.

 0
Author: ЯegDwight, 2012-10-03 12:10:24

Até onde eu estava à procura de resposta também, e queria complementá-lo com o CSS. I found solution by CSS NINJA É uma boa impelmentação de {[[0]} e alguns css Demo ao vivo! Embora não esteja a funcionar no IE 8 Você poderia implementar selectivizr ! e fixar CSS onde usa opacity a filter para fazê-lo funcionar no IE.

Editar 2014:

Para os novos botões de comutação, eu uso a solução encontrada noLea Verou blog visualmente semelhante à opção iOS

 0
Author: Aivaras Prudnikovas, 2014-02-20 16:16:03