时间戳

首页 > 解决方案 > 仅旋转按钮，而不是按钮单击时的文本

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

问题描述

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

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

CSS：

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

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

标签： htmlcss

解决方案

将按钮文本包裹在 a 中，然后将其span再旋转180 度：:focusbutton

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

.btn:focus span {
  display: inline-block;
  transform: rotate(180deg);
}
<button class="btn" type="button"><span>Go</span></button>

推荐阅读