Button when clicked has effect on other

Asked

Viewed 273 times

-1

I made a button using ID’s and still when clicked it gives a margin-top=10px in both. What is my mistake? I want it to take effect only on 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

  • Javascript missing in question.

  • That one margin-top=20px must be somewhere else, because in those selectors you put in the question no puts 20px.

  • It is not necessary to use Javascript to resolve this as far as I know

  • no, I just misspelled at the time

  • 1

    If you call a javascript function in onclick. How is it not necessary? it is possible that you have changed the id of the element where you call the button click event check in your jascript if you have not changed the ids.

  • The problem is in CSS. The margin of button:active is directly affecting others.

  • I still haven’t made the Js of the site, I put onclick there to remind me later(I took it and still didn’t help)

  • How do I make them not to be affected? 'margin-right' higher on the button?

Show 3 more comments

1 answer

3


Add the property vertical-align: top on the selector button, then adjust the margin-top button :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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.