:root{ --color: #62327a; --_g: linear-gradient(var(--color) 0 0) no-repeat; } .btn{ color: var(--color); background: var(--_g) calc(var(--_p,0%) - 100%) 0%, var(--_g) calc(200% - var(--_p,0%)) 0%, var(--_g) calc(var(--_p,0%) - 100%) 100%, var(--_g) calc(200% - var(--_p,0%)) 100%; background-size: 50.5% calc(var(--_p,0%)/2 + .5%); outline-offset: 0.1em; font-family: 'Signika', sans-serif; font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 8px 15px; border-radius: 0; border: none; position: relative; margin: 0 10px; z-index: 1; box-shadow: 0 0 0 0.1em inset var(--color); transition: background-size .4s, background-position 0s .4s; } .btn:hover, .btn:focus{ color:#fff; --_p: 100%; transition: background-position .4s, background-size 0s; } @media only screen and (max-width: 767px){ .btn{ margin-bottom: 30px; } }