-1

Fiz um botão usando ID's e mesmo assim quando clicado ele da um margin-top=10px em ambos. Qual meu erro? Quero que ele faça efeito somente no botão que foi clicado!

button{
	border: none;
	background-color: lemonchiffon;
	border-radius: 50%;
	padding: 10px;
	margin-right: 10px;
	box-shadow: 0px 8px #666;
	cursor: pointer;
}
#azul:active{
	background-color: skyblue;
	cursor: pointer;
	box-shadow: 0px 5px dimgray;
	margin-top: 10px;
}
#red:active{
	background-color: tomato;
	cursor: pointer;
	box-shadow: 0px 5px dimgray;
	margin-top: 10px;
}
<div class="bot">
		<h2>Avalie nosso site</h2>
		<button onclick="positivo()" id="azul">
			<span class="fa fa-thumbs-o-up fa-3x" style="color: navy;"></span>
		</button>
		<button onclick="negativo()" id="red">
			<span class="fa fa-thumbs-o-down fa-3x" style="color: red;"></span>
		</button>

8
  • Falta o JavaScript na pergunta.
    – Sergio
    Commented 13/07/2017 às 20:46
  • Esse margin-top=20px deve estar em outro lugar, porque nesses seletores que você colocou na pergunta nenhum coloca 20px. Commented 13/07/2017 às 20:48
  • Não é necessário usar Javascript para resolver isso pelo que eu sei
    – nelson450
    Commented 13/07/2017 às 20:48
  • não, eu simplesmente escrevi errado na hora
    – nelson450
    Commented 13/07/2017 às 20:49
  • 1
    Se você chama no onclick uma função javascript. Como não é necessário? é possível que tenha trocado o id do elemento aonde chama o evento de clique do botão verifique no seu jascript se não trocou as ids.
    – user77310
    Commented 13/07/2017 às 20:51

1 Resposta 1

3

Adicione a propriedade vertical-align: top no seletor button, depois ajuste o margin-top dos botões :active.

JSFiddle

button {
  border: none;
  background-color: #ded268;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0px 8px #666;
  cursor: pointer;
  margin-right: 10px;
  vertical-align: top;
}

#azul:active {
  background-color: skyblue;
  cursor: pointer;
  box-shadow: 0px 5px dimgray;
  margin-top: 3px;
}

#red:active {
  background-color: tomato;
  cursor: pointer;
  box-shadow: 0px 5px dimgray;
  margin-top: 3px;
}
<div class="bot">
  <h2>Avalie nosso site</h2>
  <button id="azul">
    <span class="fa fa-thumbs-o-up fa-3x" style="color: navy;"></span>
  </button>
  <button id="red">
    <span class="fa fa-thumbs-o-down fa-3x" style="color: red;"></span>
  </button>

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 .