Question

When you click an button HTML button, button goes inwards hence making the text inside the button move downwards slightly. My question is, how can I stop the button changing (going inwards) when it is clicked?

I hope you can understand my question.

Answer 1

After you have done whatever you like with the border etc., just put a span inside the button around the text like so:

<button class="button" type="submit"><span class="buttonspan">Blah</span></button>

Then the CSS becomes:

button {position:relative; width:40px; height:20px /* set whatever width and height */}

buttonspan {
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

Making sure to set the span absolute and the button relative.. works like a charm.