仅旋转按钮，而不是单击按钮时的文本

Question

我在点击时旋转按钮：

<button class="btn" type="button">Go</button>

css：

.btn:focus {
  transform: rotate(180deg);
}

现在问题是txt也会在btn单击时旋转。如何在单击按钮时不旋转txt或将其旋转360度？

Answer 1

将按钮文本包装在span中，然后将:focus的{​​{1}}上的按钮文本再旋转180度：

button

.btn:focus {
  transform: rotate(180deg);
}

.btn:focus span {
  display: inline-block;
  transform: rotate(180deg);
}

Answer 2

用<button class="btn" type="button"><span>Go</span></button>包裹文本，然后将其旋转到另一个方向：

span

.btn:focus {
  transform: rotate(180deg);
}

.btn:focus > span {
  display: block;
  transform: rotate(-180deg);
}