從網站重新創建按鈕懸停效果

Question

我想要一個與foxmovies.com these are the buttons具有相同懸停效果的按鈕。

我沒有設法在網上找到一個例子，帶有箭頭移動效果。 任何幫助將是偉大的，謝謝。

Answer 1

創建的基本懸停效果，調整它額外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>