re-creating a button hover effect from a website - css

Question

I want to a button with the same hover effect as in foxmovies.com
these are the buttons.
I didn't manage to find an example online, with the arrow moving effect.
any help would be great, thanks.

Answer 1

Created the base hover effect, tweak it for extra 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>