css - 按钮状态通过单击持续存在？

Question

我注意到在 Iphone 上我的按钮状态有点滑稽。

这是设置的内容：

<button class="button follow">follow</button>
<button class="button unfollow" style>unfollow</button>

CSS：

.button {
  background: green;
}

.button:hover, .button:active {
  red;
}

单击按钮时，它们会执行 ajax 功能并交替使用。IE 如果关注显示并且我单击关注，则进行 ajax 调用并且关注被隐藏并显示取消关注，反之亦然。

我的难题：

在移动设备中，当我单击按钮时，按钮会交换，但新按钮会呈现为活动状态（即背景为红色）。

关于如何确保按钮不会在其悬停/活动状态下呈现的任何想法？