Button when clicked has effect on another

Question

Button when clicked has effect on another

Navigation

#1 by (3 votes)

-1

I made a button using ID's and even so when clicked it gives a margin-top=10px in both. What is my mistake? I want it to only effect the button that was clicked!

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>

html css

asked by anonymous 13.07.2017 / 22:45

1 answer

mysqli_prepare () expects exactly 2 parameters, 1 given How to perform a bind_param () with SELECT UNION ALL

score 3 · Accepted Answer

Add the vertical-align: top property in the button selector, then set the margin-top of the :active buttons.

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>