button creates bad effects on small buttons on click

Question

I have a problem in my project. I have some buttons side by side. 1st one is big, 2nd one is medium and 3rd one small button. 3 of the buttons have almost same css property except padding and color. When the 1st one gets clicked other Buttons change their position. when 2nd and 3rd one is clicked they don't get down. I know this happening for holder padding and 1st one,s height. I want the effect like 1st button. 2nd and 3rd one just remove border and they don't come down like 1st one. Is there is any solution for fix this?

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
    color: #FFF;
}
.super-holder {
    display: block;
    text-align: center;
    padding: 20px;
    background-color: #f06060;
    font-size: 20px;
}
a:active, a:hover {
    outline: 0;
}
.btn1 {
    border-radius: 4px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 26px;
    background-color: #9C27B0;
    display: inline-block;
    text-decoration: none;
    border-bottom: 4px solid rgba(0,0,0,0.21);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: pointer;
}
.btn1:active {
    position: relative;
    border-bottom: 0px solid rgba(0,0,0,0.21);
    margin-top: 4px;
    color: #FFF;

}
.btn2 {
    border-radius: 3px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 20px;
    background-color: #79B039;
    display: inline-block;
    text-decoration: none;
    border-bottom: 4px solid rgba(0,0,0,0.21);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: pointer;
}
.btn2:active {
    position: relative;
    border-bottom: 0px solid rgba(0,0,0,0.21);
    margin-top: 4px;
    color: #FFF;

}
.btn3 {
    border-radius: 3px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 15px;
    background-color: #3F51B5;
    display: inline-block;
    text-decoration: none;
    border-bottom: 4px solid rgba(0,0,0,0.21);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: pointer;
}
.btn3:active {
    position: relative;
    border-bottom: 0px solid rgba(0,0,0,0.21);
    margin-top: 4px;
    color: #FFF;
}

demo on jsfiddle

Answer 1

Add this in your css

.super-holder div{
    float:left;
    height:80px;
    width:120px;
}
.clear{clear:both}

And wrap your buttons in a div

<div class="super-holder">
    <div><a class="btn1">Button</a></div>
    <div><a class="btn2">Button</a></div>
    <div><a class="btn3">Button</a></div>
    <p class='clear'></p>
</div>

Here is the Demo