Kimberley Furson Kimberley Furson - 1 year ago 269
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>

Here's the CSS:

#button {
display: block;
margin:10px auto;
padding:7px 13px;
font-family: 'Arial', sans-serif;
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,

Answer Source

You should apply the following styles:

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

This will give you the necessary effect, demo here.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download