如何用HTML和CSS实现Facebook点赞按钮点击变色效果？

API 探路者

2026-7-15

复刻Facebook点赞按钮（点击变色效果）

以下是纯HTML+CSS实现的方案，无需JavaScript，通过隐藏复选框维持点击后的状态：

HTML 代码

<div class="like-button-container">
  <input type="checkbox" id="like-toggle" class="like-toggle">
  <label for="like-toggle" class="like-button">
    <svg class="like-icon" viewBox="0 0 24 24" width="20" height="20">
      <path d="M16.792 3.904A4.989 4.989 0 0 1 21.5 9.122c0 3.072-2.652 4.959-5.197 7.222-2.512 2.243-3.865 3.469-4.303 3.752-.477-.309-2.143-1.823-4.303-3.752C5.141 14.072 2.5 12.167 2.5 9.122a4.989 4.989 0 0 1 4.708-5.218 4.21 4.21 0 0 1 3.675 1.941c.84 1.175.98 1.763 1.12 1.763s.278-.588 1.11-1.766a4.17 4.17 0 0 1 3.679-1.938z" fill="#65676b"/>
    </svg>
    <span class="like-text">点赞</span>
  </label>
</div>

CSS 代码

/* 隐藏复选框 */
.like-toggle {
  display: none;
}

.like-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background-color: #f0f2f5;
  color: #65676b;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.like-button:hover {
  background-color: #e4e6eb;
}

/* 点击后的激活状态 */
.like-toggle:checked + .like-button {
  background-color: #1877f2;
  color: #fff;
}

.like-toggle:checked + .like-button .like-icon path {
  fill: #fff;
}