|
|
|
|
|
.button-group { |
|
|
display: flex; |
|
|
gap: 16px; |
|
|
margin-top: auto; |
|
|
padding-top: 8px; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 10px; |
|
|
padding: 16px 24px; |
|
|
border: none; |
|
|
border-radius: 12px; |
|
|
font-size: 15px; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
text-decoration: none; |
|
|
font-family: 'Poppins', 'Inter', sans-serif; |
|
|
letter-spacing: 0.01em; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.btn::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); |
|
|
transition: left 0.5s; |
|
|
} |
|
|
|
|
|
.btn:hover::before { |
|
|
left: 100%; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%); |
|
|
color: white; |
|
|
flex: 1; |
|
|
box-shadow: 0 4px 14px rgba(14, 165, 233, 0.3); |
|
|
} |
|
|
|
|
|
.btn-primary:hover:not(:disabled) { |
|
|
background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-800) 100%); |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4); |
|
|
} |
|
|
|
|
|
.btn-secondary { |
|
|
background: linear-gradient(135deg, white 0%, var(--gray-50) 100%); |
|
|
color: var(--gray-700); |
|
|
border: 2px solid var(--gray-200); |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); |
|
|
} |
|
|
|
|
|
.btn-secondary:hover:not(:disabled) { |
|
|
background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%); |
|
|
border-color: var(--gray-300); |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.btn-danger { |
|
|
background: linear-gradient(135deg, var(--error-500) 0%, var(--error-600) 100%); |
|
|
color: white; |
|
|
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3); |
|
|
} |
|
|
|
|
|
.btn-danger:hover:not(:disabled) { |
|
|
background: linear-gradient(135deg, var(--error-600) 0%, var(--error-700) 100%); |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4); |
|
|
} |
|
|
|
|
|
.btn:disabled { |
|
|
opacity: 0.6; |
|
|
cursor: not-allowed; |
|
|
transform: none; |
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.btn:disabled::before { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.btn-session-action { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
padding: 10px 14px; |
|
|
background: var(--gray-100); |
|
|
color: var(--gray-700); |
|
|
border: 1px solid var(--gray-200); |
|
|
border-radius: 8px; |
|
|
font-size: 13px; |
|
|
font-weight: 500; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s ease; |
|
|
text-decoration: none; |
|
|
} |
|
|
|
|
|
.btn-session-action:hover { |
|
|
background: var(--gray-200); |
|
|
border-color: var(--gray-300); |
|
|
transform: translateY(-1px); |
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); |
|
|
} |
|
|
|
|
|
.btn-session-action:active { |
|
|
transform: translateY(0); |
|
|
} |
