.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>
Willkommen bei Stackoverflow. Mitglieder möchten Ihnen helfen. Sie werden jedoch weiter kommen, wenn Sie zuerst versuchen und dann zeigen Sie uns, was Sie versucht haben. Zeig uns, was du probiert hast. Werde kreativ :) – www139
ok danke, du hast Recht –