I want the text of my <button>
elements to slightly move down/right when the button is in the :active
state. I thought I could do that by modifying the internal padding
of the buttons such that it continues to sum to the same.
My HTML:
<button>Hello</button><button>Goodbye</button>
Here's my CSS:
button {
border: 1px solid #9f9b9a;
border-radius: 5px;
background: url("button.png") repeat-x;
font-size: inherit;
padding: 0.1em 0.5em 0.1em 0.5em;
cursor: default;
}
button:hover {
border-color: black;
background-position: left -5px;
}
button:active {
padding: 0.2em 0.4em 0 0.6em;
}
Finally, here's my jsFiddle:
I'd have thought that by keeping the internal padding sum to 0.2em
vertically and 1em
horizontally that the state of the button would affect the layout of the page at all, but when I mouse-down on Hello
the Goodbye
button moves around.
Is there a better way to get the effect I want?
Pics: