如何在按钮内添加箭头图标并实现箭头动画效果？

针对你遇到的按钮箭头图标添加及动画问题，直接给你调整后的完整代码方案：

先确认Font Awesome引入 #

如果箭头图标没显示，务必确保项目中已引入Font Awesome样式文件（本地文件或官方资源均可）。

完整HTML代码 #

<a href="#target-page">
  <button class="submit" title="Book Now">Book Now <i class="fas fa-angle-right"></i></button>
</a>

优化后的CSS代码 #

#booking button.submit {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  background-color: lightblue;
  color: black;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 20px;
  cursor: pointer;
  margin-bottom: 5px;
  margin-left: 30px;
  /* 让文字和箭头居中对齐，增加间距 */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 统一过渡效果，让hover变化更丝滑 */
  transition: all 0.3s ease;
}

#booking button.submit:hover {
  color: grey;
  /* 可选：hover时微调背景色，增强反馈 */
  background-color: #add8e6;
}

/* 箭头的跳转提示动画 */
#booking button.submit .fas.fa-angle-right {
  transition: transform 0.3s ease;
}

#booking button.submit:hover .fas.fa-angle-right {
  /* hover时箭头向右平移，明确提示可跳转 */
  transform: translateX(5px);
}

关键调整点 #

• 用inline-flex布局让按钮内元素对齐更整齐，gap控制文字和箭头的间距
• 给箭头单独设置平移动画，hover时向右移动，直观提示这是跳转入口
• 给按钮添加统一过渡，让所有交互变化更流畅自然

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