1

Olá, eu gostaria que quando fosse pressionado o botão, ele mudasse de cor e continuasse assim até que outro seja pressionado. Eu tentei com o :focus, mas caso pressione outro elemento a cor volta.

Botões:

<input type="button" class="button" name="button1" id="button1" value="button1">
<input type="button" class="button" name="button2" id="button2" value="button2">

CSS:

.button
{
    background: #76c764;
    height: 30px;
    width: 49%;
    border: none;
    border-radius: 5px;
}
.button:focus
{
    box-shadow: 0 0 0 0;
    border: 0 none;
    outline: 0;
    background: #69e673;
} 

1 Resposta 1

1

Podes fazer isso com JavaScript ou com HTML e CSS, mas aí com algum engenho...

Se fizeres com HTML tens de mudar um pouco a estrutura e poderia ser assim, mas é meio "hack".

fieldset {
	border: none;
}
button {
	border: none;
	border-radius: 5px;
	background: #eef;
	margin: 0;
	padding: 0;
}

fieldset label {
	display: block;
	padding: 10px;
	font-size: 15px;
}

fieldset input[type="radio"] {
	display: none;
}
fieldset input[type="radio"]:checked + button {
	background-color: #aaf;
}
<fieldset>
    <input type="radio" name="algo" id="um">
    <button>
        <label for="um">clica-me</label>
    </button>
</fieldset>
<fieldset>
    <input type="radio" name="algo" id="dois">
    <button>
        <label for="dois">clica-me</label>
    </button>
</fieldset>

Com JavaScript seria mais simples:

var radios = document.querySelectorAll('.radio');
function toggleButton(el) {
  for (var i = 0, l = radios.length; i < l; i++) {
    var fn = radios[i] == el ? 'add' : 'remove';
    radios[i].classList[fn]('focus');
  }
}
.button {
  background: #76c764;
  height: 30px;
  width: 49%;
  border: none;
  border-radius: 5px;
}

.button.focus {
  box-shadow: 0 0 0 0;
  border: 0 none;
  outline: 0;
  background: #69e673;
}
<input type="button" class="button radio" name="button1" id="button1" value="button1" onClick="toggleButton(this);">
<input type="button" class="button radio" name="button2" id="button2" value="button2" onClick="toggleButton(this);">

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .