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

Posted 2023-03-06

【中文标题】从网站重新创建按钮悬停效果

【英文标题】：re-creating a button hover effect from a website

【发布时间】：2017-05-12 01:32:23

【问题描述】：

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

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

【问题讨论】：

欢迎来到 ***。会员正在寻求帮助。但是，如果您先尝试，然后向我们展示您的尝试，您将获得更进一步的成果。向我们展示您的尝试。发挥创意:)

好的，谢谢，你说得对

【参考方案1】：

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

.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;

<a class="btn">
  <span>Watch the Trailer</span>
  <span class="arrow">></span>
</a>