如何在按钮内移动文本？

Question

我需要在单击时水平移动按钮内的文本以产生 win95 风格的单击效果。

我试过用翻译来做，但这会移动整个按钮，而不仅仅是它的内容。如何移动文本？我想避免在按钮内创建元素或弄乱填充。

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

如果不想使用其他元素，可以使用文本阴影。

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>