Moving the text inside the button - html

Question

There is a button. Inside the button text. How to move the text when you click on an 1 px down, not moving with the button itself, only the text inside?
<span class="button-wrapper">
<a href="#" class="button">
button text
</a>
</span>
1.button-wrapper - Serves as the gradient border
2.element have 1px margin + background-gradient
If I have orders from the top padding, clicking, button increases in size, but I just need to move text within a tag and, without moving a button, how?

Answer 1

It might be worth using the right markup to properly achieve your desired effect.
<button class="button">
<span href="#" class="innerButton">
button text
</span>
</button>
Then you can use this CSS to move the span 1px down on click.
.button span
{
position: relative;
}
/*while pressing*/
.button span:active
{
top: 1px;
}
http://jsfiddle.net/UuyFe/

Answer 2

Or, alternatively, for the text in a single input button element
<input id="submit" type="submit" value="Submit" />
this CSS may be useful:
#submit
{
padding-top: 4px;
}
#submit:active
{
padding-top: 6px;
}

Answer 3

I had a similar problem and fixed it as follows, though I don't particularly understand why the float is necessary. Any comments on that would be greatly appreciated.
I'm using padding to make the text move, by adding 1px top + left and subtracting 1px right + bottom. But for some reason that I don't understand, this alone pushes the sibling boxes down 1px. We don't want the buttons themselves to move, though.
HTML:
<p>
<span class="button">third</span>
<span class="button">fourth</span>
</p>
<p>
<input type="button" class="button button2" value="fifth" />
<input type="button" class="button button2" value="sixth" />
</p>
CSS:
.button {
outline: none;
background-color: blanchedalmond;
border: 1px solid maroon;
padding: 3px 10px 4px 10px;
box-sizing: border-box;
display: inline-block;
position: relative;
line-height: 20px;
margin: 0;
}
span.button {
display: inline-block;
text-indent: -9999px;
width: 20px;
height: 20px;
}
p {
background-color: magenta;
overflow: auto;
}
.button2 {
float: left;
margin-right: 4px;
}
.button:active {
background-color: red;
border: 1px solid brown;
padding: 4px 9px 3px 11px;
margin-top: 0px;
}
Fiddle where "fifth" and "sixth" behave like we want them to because we added float.