.btn{ color: #fff; background-image: linear-gradient(30deg, #A770EF 10%,#CF8BF3 20%, transparent 50%); background-size: 500px; background-repeat: no-repeat; background-position: 0%; font-family: 'Chakra Petch', sans-serif; font-size: 18px; font-weight: 700; text-transform: capitalize; letter-spacing: 3px; padding: 6px 12px; border-radius: 0; border: 3px solid #A770EF; transition: all 300ms ease-in-out; } .btn:focus, .btn:hover{ color: #A770EF; background-position: 100%; } @media only screen and (max-width: 767px){ .btn{ margin-bottom: 30px; } }