JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container my-5 text-center">
  <a href="/works.html" class="action mx-auto">Больше работ</a>
</div>

SCSS

a.action,
button.action {
    display: inline-block;
    min-width: 280px;
    background: linear-gradient(to right, #F26A51, #FF5E8E, #FFCF4F, #F16A51);
    border-radius: 9px;
    background-size: 300% 100%;
    color: #fff;
    padding: 18px 30px;
    border: none;
    text-align: center;
    transition: background 500ms ease-out;
    font: {
        weight: bold;
        size: 16px;
    }
    &::after {
        content: '\f054';
        font-size: 15px;
        margin-left: 20px;
        font-family: 'Font Awesome 5 Free';
        transition: 400ms all;
        display: inline-block; // Обратите внимание сюда
    }
    &:hover {
        background-position: 100% 0;
        text-decoration: none;
        &::after {
            transform: translateX(10px);
        }
    }
}