How do i move text inside a button? - html

Question

I need to move the text inside a button horizontally on click to make a win95-ish click effect.
I've tried doing it with translate, but that moves the whole button, not just its contents. How do i move the text? I'd like to avoid creating elements inside buttons or messing with the padding.
body {
background-color: #008080;
}
button {
background-color: #C0C0C2;
color: #000;
padding: 5px 12px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
}
button:active {
border-top: 2px solid #000;
border-left: 2px solid #000;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
}
<button type="button">Click me!</button>
https://jsfiddle.net/qz0gt378/

Answer 1

You can use a text-shadow if you don't want to use other elements.
body {
background-color: #008080;
}
button {
background-color: #C0C0C2;
color: #000;
padding: 5px 12px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
}
button:active {
border-top: 2px solid #000;
border-left: 2px solid #000;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
text-shadow: 2px 2px 0px black;
color: transparent;
}
<button type="button">Click me!</button>

Answer 2

You can change the padding of your button.
body {
background-color: #008080;
}
button {
outline: none;
background-color: #C0C0C2;
color: #000;
padding: 5px 12px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
}
button:active {
border-top: 2px solid #000;
border-left: 2px solid #000;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
padding: 6px 11px 4px 13px;
}
<button type="button">Click me!</button>