解决按钮Hover时文本左移问题：仅箭头展开且全区域可点击

修改后的代码 #

HTML

<a href="/" class="button--gold-arrow button--large">
  <span class="button__text">Reserve A Table</span> 
  <span class="button__icon_arrow"></span>
</a>

CSS

.button--gold-arrow {
  display: flex;
  align-items: center;
  padding: 1.2rem 0;
  line-height: 1.5rem;
  background: #9e8659;
  text-transform: uppercase;
  font-family: arial, sans-serif;
  width: 350px;
  max-width: 350px;
  border: 0;
  font-size: 14px;
  letter-spacing: 3px;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  opacity: 1;
  transform: translateY(0);
  margin: 0 auto 10px auto;
  transition: background-size .5s ease-in-out;
  text-decoration: none;
}

.button--gold-arrow .button__text {
  transition: .5s;
  color: #fff;
  flex: 1;
  text-align: center;
}

.button--gold-arrow .button__icon_arrow {
  margin-left: 17px;
  transition: all .5s;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  color: #fff;
}

.button--gold-arrow .button__icon_arrow:before {
  content: "";
  display: flex;
  transition: all .5s ease-in-out;
  right: 1px;
  width: 100%;
  border-color: inherit;
  border-top: 1px solid;
  position: absolute;
  top: 50%
}

.button--gold-arrow .button__icon_arrow:after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-right: 1px solid;
  border-bottom: 1px solid;
  transform: rotate(-45deg);
  position: absolute;
  right: 2px;
  top: 8px;
  border-color: inherit
}

.button--gold-arrow.button--large:hover .button__icon_arrow {
  width: 2.8125rem;
}

修改说明 #

1. 解决文本左移问题：

   • 给.button__text添加flex: 1，让文本区块占据按钮剩余所有空间，箭头固定在右侧独立区域
   • 给.button__text添加text-align: center，确保文本在自身区块内居中，箭头宽度变化时不会挤压文本位置
   • 调整按钮的flex布局，去掉重复的justify-content: center，改用align-items: center实现内容垂直居中

2. 确保整个按钮区域可点击：

   • 原代码已用<a>标签包裹整个按钮内容，<a>作为flex容器会默认占据整个按钮区域，因此按钮的任意部分（背景、文本、箭头）都能触发跳转，无需额外修改

3. 优化冗余代码：

   • 移除按钮样式中重复的margin设置，统一为margin: 0 auto 10px auto
   • 移除按钮transition中不需要的right和width属性，只保留必要的过渡效果

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