Enhance online payment button design: Oval, Red, Animated
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user