:root{ --white: #fff; --background: linear-gradient(#268bff, #5b37eb); } .demo{ background: #212121; } .link{ color: var(--white); background: var(--background); font-family: "Outfit", sans-serif; font-size: 22px; font-weight: 600; line-height: 31px; padding: 2px 12px; text-transform: capitalize; border: none; display: inline-block; overflow: hidden; position: relative; transition: all 0.3s ease; z-index: 1; } .link:hover, .link:focus{ color: var(--white); animation: animate 1.5s infinite; } @keyframes animate{ 0% { box-shadow: 0 0 0 0 rgba(5, 186, 218, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(218, 103, 68, 0%); } 100% { box-shadow: 0 0 0 0 rgba(218, 103, 68, 0%); } } @media only screen and (max-width: 767px){ .link{ margin-bottom: 30px; } }