-2
我想要一个与foxmovies.com these are the buttons具有相同悬停效果的按钮。从网站重新创建按钮悬停效果
我没有设法在网上找到一个例子,带有箭头移动效果。 任何帮助将是伟大的,谢谢。
我想要一个与foxmovies.com these are the buttons具有相同悬停效果的按钮。从网站重新创建按钮悬停效果
我没有设法在网上找到一个例子,带有箭头移动效果。 任何帮助将是伟大的,谢谢。
创建的基本悬停效果,调整它额外efffect
.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>
欢迎#1。成员正在寻求帮助你。但是,如果您先尝试一下然后告诉我们您尝试了什么,那么您会进一步得到更多。告诉我们你试过的东西。获得创意:) – www139
好的谢谢你,你的权利 –