Восстанавливает эффект зависания кнопки с веб-сайта

Question

Я хочу кнопку с тем же эффектом зависания, что и в foxmovies.comthese 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>