:root{ --white: #fff; --color:#005e78; } .btn{ color: var(--white); background: var(--color); font-family: "Righteous", sans-serif; font-size: 22px; font-weight: 400; text-transform: uppercase; width: 130px; padding: 6px 14px; border-radius: 50px; border: none; position: relative; transition: all 0.5s ease-in-out; } .btn:hover{ color: var(--white); animation: animate 0.3s linear infinite both; } @keyframes animate { 0%{ transform: translate(0); } 20%{ transform: translateX(-2px) translateY(2px); } 40%{ transform: translateX(-2px) translateY(-2px); } 60%{ transform: translateX(2px) translateY(2px); } 80%{ transform: translateX(2px) translateY(-2px); } 100%{ transform: translate(0); } } @media only screen and (max-width: 767px){ .btn{ margin-bottom: 30px; } }