HTML按钮右侧箭头图标无法填充容器高度问题求助

我想制作一个右侧带有箭头图标的按钮，鼠标悬停时箭头向左展开。尝试了多种方法让箭头的背景完全填充按钮高度，但始终无法达到预期效果。右侧箭头使用自定义字体，相关HTML与CSS代码如下：

CSS代码 #

.white-button-arrow {
  cursor: pointer;
  width: 70%;
  height: 75px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin: 0;
  background: white;
  border: solid 3px black;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.white-button-arrow-text {
  padding-left: .5em;
  font-family: Friends-UltraBold;
  font-size: 1.7em;
}

.white-button-arrow-icon {
  display: flex;
  //height: 75px;
  align-items: center;
  border-radius: 0 3px 3px 0;
  padding: 0.5em;
  font-size: 2em;
  background: black;
  color: white;
  transition: all 0.3s ease;
}

.white-button-arrow:hover .white-button-arrow-icon {
  color: #ff5a45;
  padding-left: 10%;
  text-indent: -60%;
}

.white-button-arrow:hover {
  background: #ff5a45;
}

HTML代码 #

<button class="white-button-arrow" style="width: 90%;"> 
   <span class="white-button-arrow-text">
      <b>GOOGLE-MAPS</b>
   </span> <span class="white-button-arrow-icon">l</span> 
</button>

我尝试过将箭头元素的height设置为inherit，甚至硬设为75px，但问题依然存在：

• 初始效果：
• 设置inherit后的效果：

问题根源在于按钮的align-items: center限制了子元素高度，加上按钮的边框和圆角导致箭头背景无法完全贴合。以下是修复后的代码：

.white-button-arrow {
  cursor: pointer;
  width: 70%;
  height: 75px;
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* 替换center为stretch，让子元素自动填满高度 */
  padding: 0;
  margin: 0;
  background: white;
  border: solid 3px black;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.white-button-arrow-text {
  padding-left: .5em;
  font-family: Friends-UltraBold;
  font-size: 1.7em;
  display: flex;
  align-items: center; /* 让文本垂直居中 */
}

.white-button-arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center; /* 箭头图标居中 */
  height: 100%; /* 强制填满按钮高度 */
  border-radius: 0 7px 7px 0; /* 按钮边框3px，圆角设为10-3=7px，和按钮外边框对齐 */
  padding: 0 0.5em; /* 只保留左右内边距，避免上下内边距挤占高度 */
  font-size: 2em;
  background: black;
  color: white;
  transition: all 0.3s ease;
}

.white-button-arrow:hover .white-button-arrow-icon {
  color: #ff5a45;
  padding-left: 10%;
  text-indent: -60%;
}

.white-button-arrow:hover {
  background: #ff5a45;
}

关键修改点： #

1. 按钮的align-items: stretch：让子元素（文本和箭头）自动填充按钮的整个高度，无需手动设置高度值。
2. 文本元素添加display: flex + align-items: center：保证文本在按钮内垂直居中，抵消stretch带来的影响。
3. 箭头元素的height: 100% + 调整圆角：圆角设为7px是因为按钮有3px边框，这样箭头的圆角能和按钮外边框完美匹配，不会出现缝隙。
4. 箭头内边距改为左右方向：避免上下内边距导致背景无法填满高度。

修改后箭头的黑色背景就能完全填充按钮高度，同时鼠标悬停的展开动画也能正常工作。

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