Gradient Tailwind CTA Button with Interactive States

<button class="appearance-button bg-blue-600 border border-blue-600 rounded-2xl text-white cursor-pointer inline-block font-medium text-base leading-6 m-0 outline-none py-2 px-4 text-center touch-manipulation transition-all duration-150 ease-in-out select-none align-middle hover:bg-blue-700 hover:border-blue-700 focus:bg-blue-800 focus:border-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-50 active:bg-blue-900 active:border-blue-900 disabled:opacity-65 disabled:pointer-events-none relative overflow-hidden" 
        style="font-family: Inter, sans-serif; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0 inset, rgba(46, 54, 80, 0.075) 0 1px 1px;" 
        role="button">
    Sign Up
</button>