Kimberley Furson Kimberley Furson - 4 months ago 72
HTML Question

Onclick CSS button effect

I'm creating a CSS button and I'm trying to make an onclick effect: when the user clicks on the button it would push down the button text by 1px. My problem here is that it's pushing the whole bottom of the button. How would you proceed?

<div class="one">
<p><a id="button" href=#>Button</a></p>
</div>


Here's the CSS:

#button {
display: block;
width:150px;
margin:10px auto;
padding:7px 13px;
text-align:center;
background:#a2bb33;
font-size:20px;
font-family: 'Arial', sans-serif;
color:#ffffff;
white-space: nowrap;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

}

#button:active {
vertical-align: top;
padding-top: 8px;
}

.one a {
text-decoration: none;
}


Thanks in advance,
Kim

Answer

You should apply the following styles:

#button:active {
    vertical-align: top;
    padding: 8px 13px 6px;
}

This will give you the necessary effect, demo here.