Enhance online payment button design: Oval, Red, Animated

This commit is contained in:
Muhammet Güler
2026-02-17 10:57:53 +03:00
parent 477993ec83
commit 452d05f4a1
@@ -177,7 +177,35 @@
</div> </div>
<!-- Submit Button --> <!-- Submit Button -->
<button type="submit" class="w-full py-5 bg-orange-600 hover:bg-orange-700 text-white font-bold text-lg rounded-full shadow-xl shadow-orange-200/50 hover:shadow-orange-600/30 hover:-translate-y-1 active:translate-y-0 transition-all duration-300 flex items-center justify-center gap-3"> <!-- Custom Style for Payment Button -->
<style>
#payment-submit-btn {
background-color: #e31e24;
color: white;
border-radius: 9999px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
width: 100%;
font-weight: bold;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
box-shadow: 0 10px 15px -3px rgba(254, 202, 202, 0.5);
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
#payment-submit-btn:hover {
background-color: #c4161b;
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgba(220, 38, 38, 0.3);
}
</style>
<!-- Submit Button -->
<button type="submit" id="payment-submit-btn">
<span>{!! t('Ödemeyi Tamamla') !!}</span> <span>{!! t('Ödemeyi Tamamla') !!}</span>
<i class="uil uil-arrow-right text-2xl"></i> <i class="uil uil-arrow-right text-2xl"></i>
</button> </button>