update(css): added btn-spinner, refactored btn-primary class

This commit is contained in:
Azmat Ali
2026-03-09 15:21:38 +05:30
parent 15b62a5ab5
commit e186d4f930
3 changed files with 28 additions and 24 deletions
-20
View File
@@ -396,21 +396,9 @@ body {
/* CTA buttons */ /* CTA buttons */
.btn-checkout { .btn-checkout {
display: flex;
align-items: center;
justify-content: center; justify-content: center;
gap: var(--space-2);
background: var(--blue);
color: white;
border: none;
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-6);
font-size: var(--text-xl); font-size: var(--text-xl);
font-weight: 700;
cursor: pointer;
font-family: inherit;
width: 100%; width: 100%;
transition: background 0.2s, transform 0.15s;
} }
.btn-checkout:hover { .btn-checkout:hover {
@@ -418,10 +406,6 @@ body {
transform: translateY(-0.0625rem); transform: translateY(-0.0625rem);
} }
.btn-checkout::after {
content: "→";
}
.btn-continue { .btn-continue {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -445,10 +429,6 @@ body {
background: var(--blue-light); background: var(--blue-light);
} }
.btn-continue::before {
content: "←";
}
.btn-clear { .btn-clear {
display: flex; display: flex;
align-items: center; align-items: center;
+1
View File
@@ -112,6 +112,7 @@ body {
} }
.checkout-continue { .checkout-continue {
justify-content: center;
margin-top: var(--space-4); margin-top: var(--space-4);
} }
+27 -4
View File
@@ -556,12 +556,12 @@ nav {
gap: var(--space-2); gap: var(--space-2);
background: var(--blue); background: var(--blue);
color: white; color: white;
padding: var(--space-4) var(--space-6); border: none;
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: var(--space-4) var(--space-6);
font-size: var(--text-md); font-size: var(--text-md);
font-weight: 700; font-weight: 700;
transition: all 0.2s; transition: all 0.2s;
border: none;
cursor: pointer; cursor: pointer;
font-family: inherit; font-family: inherit;
} }
@@ -571,8 +571,31 @@ nav {
transform: translateY(-0.0625rem); transform: translateY(-0.0625rem);
} }
.btn-primary::after { .btn-spinner {
content: "→"; display: none;
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-top: 2px solid white;
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
.btn-primary.loading .btn-text {
display: none;
}
.btn-primary.loading .btn-spinner {
display: inline-block;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
} }
/* HERO CTA PREMIUM EFFECT */ /* HERO CTA PREMIUM EFFECT */