html - 在 CSS 动画中使用右箭头的最佳方式

Question

我正在尝试创建一个在悬停状态下显示右箭头的继续按钮。我还希望箭头居中。

我尝试添加 .icon-arrow-right:before {content: "&rarr";}

body {
  background: #00b894;
}

.btn {
  font-size: 14px;
  background: none;
  padding: 25px 80px;
  display: inline-block;
  margin: 15px 30px;
  position: relative;
  border: 3px solid #fff;
  color: #fff;
  overflow: hidden;
  transition: all 0.3s;
}

.btn:before {
  position: absolute;
  height: 100%;
  font-size: 125%;
  line-height: 3.5;
  color: #fff;
  transition: all 0.3s;
  left: 130%;
  top: 0;
}

.icon-arrow-right:before {
  content: "#";
}

.btn:hover:before {
  left: 80%;
}

<button class="btn icon-arrow-right">Continue</button>

我希望箭头在悬停状态下位于按钮文本的右侧。我还希望箭头以按钮文本为中心。

Answer 1

将你的伪元素变成你想要的三 Angular 形:

.icon-arrow-right:before {
  margin-top: 21px;
  content: "";
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-left: 14px solid white;
  border-bottom: 7px solid transparent;
}

这使用了很棒的透明边框技巧使元素框显示为三 Angular 形。改变边框宽度来改变三 Angular 形的大小，注意带颜色的边框是透明边的两倍宽。您可以使用这些值来根据自己的喜好调整三 Angular 形。

我还更改了您在按钮中定位文本的方式:

.btn {
  padding: 0 80px; /* padding on sides only */
  height: 64px; /* height of the button you want */
  line-height: 58px; /* same as height minus the border-top and border-bottom */
  border: 3px solid #fff;
}

通过这种方式使用行高，您可以保证您的文本在任何字体大小的按钮中垂直居中。

查看完整的工作示例:

body {
  background: #00b894;
}

.btn {
  font-size: 14px;
  background: none;
  padding: 0 80px; /* padding on sides only */
  height: 64px; /* height of the button you want */
  line-height: 58px; /* same as height minus the border-top and border-bottom */
  display: inline-block;
  margin: 15px 30px;
  position: relative;
  border: 3px solid #fff;
  color: #fff;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
}


.btn:before {
  position: absolute;
  height: 100%;
  font-size: 125%;
  line-height: 3.5;
  color: #fff;
  transition: all 0.3s;
  left: 130%;
  top: 0;
}

.icon-arrow-right:before {
  margin-top: 21px;
  content: "";
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-left: 14px solid white;
  border-bottom: 7px solid transparent;
}

.btn:hover:before {
  left: 80%;
}

<button class="btn icon-arrow-right">Continue</button>