Button's hover works wrong, top margin

Question

i made two buttons, with border: 2px solid #color , after I hover on them, the border vanishes and the button goes 2px down. I just made :hover margin2 px more than the normal one. Everything is okay, but the only problem is that when I hover one of my buttons, both goes these 2px down. What's wrong?

Cheers.

This is my html code:

<div class="slide-wrapper">
        <h2>We are <span>cool</span> kids</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta, nulla sit amet rutrum finibus, ligula orci.</p>
        <a href="#" class="btn btn-show">Videos</a>
        <a href="#" class="btn btn-sign">Sign for a newsletter</a>
</div>

And this is my css:

.btn {
    padding: 16px 38px;
    margin-right: 30px;
    border-radius: 5px;
    display: inline-block;*/
}

.btn:last-child {
    margin-right: 0;
}

.btn-show {
    background: #4183d7;
    box-shadow: 0 2px #446cb3;
}

.btn-sign {
    background-color: #87d37c;
    box-shadow: 0 2px #7ebc74;
}

.btn-show:hover,
.btn-sign:hover,
.btn-newsletter:hover {
    margin-top: 2px;
    box-shadow: none;
}

Answer 1

The issue is display: inline-block defaults to the baseline . So when you push one button down 2px's the other one is going by default (since there is 2 more pixels of space). Set the vertical alignment to default to top :

.btn {
    padding: 16px 38px;
    margin-right: 30px;
    border-radius: 5px;
    display: inline-block;
    vertical-align: top; //add
}

FIDDLE