从网站重新创建按钮悬停效果

Question

我想要一个与foxmovies.com具有相同悬停效果的按钮 these are the buttons

我没有设法在线找到一个示例，箭头移动效果。 任何帮助都会很棒，谢谢。

Answer 1

创建基本悬停效果，调整它以获得额外的效果

  register() {
    this._tokenService.registerAccount({
      email: 'test@example.com',
      password: 'password',
      passwordConfirmation: 'password'
    });
  }

.btn span {
  display: inline-block;
  font-family: sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  margin-right: 4px;
  height: 48px;
  line-height: 48px;
  vertical-align: top;
  padding: 0 24px;
  background-color: #B08A43;
  background: -webkit-linear-gradient(right, #B08A43 50%, #CA9E4D 50%);
  background: -moz-linear-gradient(right, #B08A43 50%, #CA9E4D 50%);
  background: -o-linear-gradient(right, #B08A43 50%, #CA9E4D 50%);
  background: linear-gradient(to left, #B08A43 50%, #CA9E4D 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  -webkit-transition: background-position 100ms ease;
  -moz-transition: background-position 100ms ease;
  transition: background-position 100ms ease;
  -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.13);
  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.13);
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.13);
}
span.arrow {
  background-color: #B08A43;
  background: -webkit-linear-gradient(right, #B08A43 50%, #CA9E4D 50%);
  background: -moz-linear-gradient(right, #B08A43 50%, #CA9E4D 50%);
  background: -o-linear-gradient(right, #B08A43 50%, #CA9E4D 50%);
  background: linear-gradient(to left, #B08A43 50%, #CA9E4D 50%);
  background-repeat: no-repeat;
  background-position: right;
  float: none;
  line-height: 48px;
  background-color: #B08A43;
  background-size: 200% 100%;
  background-position: right bottom;
  -webkit-transition: background-position 200ms ease;
  -moz-transition: background-position 200ms ease;
  transition: background-position 200ms ease;
  -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.13);
  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.13);
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.13);
}
a:hover span {
  background-position: left bottom;
}