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

Question

我在点击时旋转一个按钮:

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

CSS:

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

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

Answer 1

将按钮文本包裹在 span 中，然后将其在 button 的 :focus 上再旋转 180 度:

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

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

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