Why do the two buttons move together? - css

Question

I hava made two buttons by CSS imitating the work from https://codepen.io/xflotus/pen/deXBzR. But they will move together when clicking one of them. I have checked the code carefully, but can not find the clue. The pen of the code is at: https://codepen.io/xflotus/pen/gzWyrg. I think the :active is not the problem:
.button:active {
margin: 2px 0px 20px 10px;
}
But, I have no idea how to find the bug. Thanks!

Answer 1

Changing margins is not the best way to make a movement of a button in active state because the entire container moves down. For the movement of a single button try this code instead and remove the old code with margins:
.button:active{transform:translateY(10px)}
Now only one button will move instead of both. You can also aply -webkit-transform property if you need support in older browsers, but it's not required for new ones.
More about this topic: LINK
EDIT:
FULL CODE SNIPPET:
.button {
display: inline-block;
padding-left: 68px;
padding-right: 20px;
height: 40px;
line-height: 40px;
font: 'Arial', Helvetica, sans-serif;
font-weight: 700;
font-size: 15px;
color: black;
text-decoration: none;
margin: 0px 0px 20px 10px;
position: relative;
}
.button .bar {
width: 1px;
height: 30px;
background: black;
position: absolute;
top: 5px;
left: 50px;
}
.button .arrow {
position: absolute;
left: 20px;
top: 11px;
}
.button .arrow .top {
position: absolute;
top: 0;
left: 3px;
width: 6px;
height: 9px;
background: #000;
}
.button .arrow .bottom {
position: absolute;
top: 9px;
left: -2px;
width: 0px;
height: 0px;
border-width: 8px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.button:active{transform:translateY(10px)}
/* ---------- CSS3 ------------*/
.button {
border-radius: 3px;
box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
transition: background-position .2s ease, margin .1s ease;
-webkit-transition: background-position .2s ease, margin .1s ease;
-moz-transition: background-position .2s ease, margin .1s ease;
background-repeat: repeat-x;
}
.button:hover {
background-position: 0 10px;
}
.blue {
background-color: #00aeef;
background-image: -webkit-linear-gradient(top, #00aeef, #00587a);
background-image: linear-gradient(top, #00aeef, #00587a);
text-shadow: 1px 1px 1px #23aaff;
border-top: 1px solid #23ccff;
}
.blue .bar {
box-shadow: 1px 1px 1px #23ccff;
}
.green {
background-color: #0f9;
background-image: -webkit-linear-gradient(top, #0f9, #060);
background-image: linear-gradient(top, #0f9, #060);
text-shadow: 1px 1px 1px #9f0;
border-top: 1px solid #23ccff;
}
.green .bar {
box-shadow: 1px 1px 1px #9f0;
}
<div id="container">
<a href="#" class="button blue">
<div class="arrow">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="bar"></div>
Download
</a>
<a href="#" class="button green">
<div class="arrow">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="bar"></div>
Download
</a>
</div>

Answer 2

Jakub Muda answer is better than mine in term of code, but to answer your exact question, that's because you add a margin to the clicked button, it pushes the container down, so both button move.
I modified your source https://codepen.io/anon/pen/RyVOyV and now they don't move together. The problem is that to get it, I had to make them position absolute.
.blue {
position:absolute;
top:15px;
}
.green {
position:absolute;
top:15px;
left:180px;
}
You can manipulate them more to get them positioned relative and independent, but that out of the scope of this question.
Hope it helps ;)