如何使用CSS实现带内部圆形箭头的悬停变色按钮

要制作内部带有圆形箭头图标的按钮，且鼠标悬停时按钮整体完全变色，可以按以下方式优化代码，用CSS统一管理样式并实现交互效果：

优化后的HTML代码 #

<div class="col-12">
  <button class="read-more-btn">
    <span>read more</span>
    <div class="icon-circle">
      <img src="img/arrow.svg" alt="箭头" />
    </div>
  </button>
</div>

对应的CSS样式 #

/* 基础按钮样式 */
.read-more-btn {
  width: 180px;
  height: 40px;
  border-radius: 30px;
  border: 1px solid #583F99;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px 0 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

/* 悬停时的整体变色效果 */
.read-more-btn:hover {
  background-color: #583F99;
  color: #fff;
}

/* 圆形图标容器样式 */
.icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #583F99;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* 悬停时圆形边框变色 */
.read-more-btn:hover .icon-circle {
  border-color: #fff;
}

/* 悬停时箭头图标变白（适用于深色箭头） */
.read-more-btn:hover .icon-circle img {
  filter: brightness(0) invert(1);
}

关键说明 #

1. 用<button>代替<div>更符合语义，自带按钮的交互特性
2. 通过display: flex实现文字和图标的水平对齐，布局更稳定
3. 利用CSS的transition属性实现悬停时的平滑过渡效果
4. 悬停时同步修改按钮背景、文字颜色、圆形边框色以及箭头图标颜色，保证整体视觉统一

内容的提问来源于stack exchange，提问作者Giovana Tempesta