Gradient Shadow Call-to-Action Button

<button class="group shadow-orange-500/30 hover:shadow-orange-500/60 transition-all duration-300 overflow-hidden hover:bg-orange-600 font-medium text-white bg-orange-500 rounded-lg pt-4 pr-8 pb-4 pl-8 relative shadow-lg" style="box-shadow:0 18px 40px -15px rgba(234,88,12,0.85), inset 0 2px 4px rgba(255,247,237,0.9);    border-radius:0.5rem; position: relative; --border-gradient: linear-gradient(180deg, rgba(251, 146, 60, 0.4), rgba(234, 88, 12, 0.5)); --border-radius-before: 8px">
    <div class="group-hover:translate-y-0 group-hover:opacity-0 transition-all duration-300 bg-white/10 absolute top-0 right-0 bottom-0 left-0 translate-y-full"></div>
    <span class="flex items-center gap-2 relative">Sign up free <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" style="width: 16px; height: 16px; color: rgb(255, 255, 255)" class="lucide lucide-send group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300 w-[16px] h-[16px]" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" data-solar="arrow-right-up-outline" data-icon-set="solar" data-icon-replaced="true" stroke-width="0.5"><path fill="#ffffff" fill-rule="evenodd" d="M9 6.75a.75.75 0 0 1 0-1.5h9a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-1.5 0V7.81L6.53 18.53a.75.75 0 0 1-1.06-1.06L16.19 6.75z" clip-rule="evenodd" class=""></path></svg></span>
</button>