.tzq-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--tzq-spacing-2);
padding: var(--tzq-btn-padding-md);
font-family: var(--tzq-font-heading);
font-size: var(--tzq-text-base);
font-weight: var(--tzq-font-bold);
text-transform: uppercase;
letter-spacing: var(--tzq-tracking-wide);
text-decoration: none;
line-height: var(--tzq-leading-none);
background: var(--tzq-gradient-primary);
color: var(--tzq-text-inverse);
border: 1px solid var(--tzq-primary-light);
border-radius: var(--tzq-radius-md);
box-shadow: var(--tzq-shadow-primary);
cursor: pointer;
user-select: none;
transition: var(--tzq-transition-all);
position: relative;
overflow: hidden;
min-height: var(--tzq-btn-min-height);
min-width: var(--tzq-btn-min-width);
}
.tzq-btn::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: var(--tzq-radius-md);
background: rgba(255, 255, 255, 0.5);
transform: translate(-50%, -50%);
transition:
width 0.6s,
height 0.6s;
}
.tzq-btn:active::after {
width: 300px;
height: 300px;
}
.tzq-btn::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: left 0.5s ease;
}
.tzq-btn:hover::before {
left: 100%;
}
.tzq-btn:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: var(--tzq-shadow-primary-lg);
text-decoration: none;
}
.tzq-btn:active {
transform: translateY(0) scale(0.98);
box-shadow: var(--tzq-shadow-md);
}
.tzq-btn:focus {
outline: none;
box-shadow: var(--tzq-shadow-primary-lg), var(--tzq-focus-ring);
}
.tzq-btn:disabled,
.tzq-btn.disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.tzq-btn--primary {
background: var(--tzq-gradient-primary);
box-shadow: var(--tzq-shadow-primary);
}
.tzq-btn--primary-modern {
display: inline-flex;
align-items: center;
gap: var(--tzq-spacing-sm);
padding: var(--tzq-spacing-md) var(--tzq-spacing-2xl);
border-radius: var(--tzq-radius-md);
font-weight: 700;
box-shadow: 0 4px 12px var(--tzq-primary-rgba-25);
transition: all 0.2s ease;
}
.tzq-btn--primary-modern:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px var(--tzq-primary-rgba-35);
}
.tzq-btn--primary-solid {
background: var(--theme-primary, var(--tzq-primary));
box-shadow: 0 4px 12px
color-mix(
in srgb,
var(--theme-primary, var(--tzq-primary)) 30%,
transparent
);
}
.tzq-btn--secondary {
background: var(--tzq-gradient-secondary);
box-shadow: var(--tzq-shadow-secondary);
}
.tzq-btn--accent {
background: var(--tzq-gradient-accent);
color: var(--tzq-text-primary);
box-shadow: var(--tzq-shadow-accent);
}
.tzq-btn--success {
background: var(--tzq-gradient-success);
box-shadow: var(--tzq-shadow-primary);
}
.tzq-btn--error,
.tzq-btn--danger {
background: var(--tzq-gradient-error);
box-shadow: var(--tzq-shadow-error);
}
.tzq-btn--danger:hover {
background: linear-gradient(135deg, var(--tzq-error-dark), var(--tzq-error));
box-shadow: var(--tzq-shadow-error-lg);
}
.tzq-btn--hero {
background: var(--tzq-gradient-primary);
box-shadow: var(--tzq-shadow-md);
padding: var(--tzq-spacing-md) var(--tzq-spacing-xl);
font-size: var(--tzq-text-sm);
font-weight: 700;
}
.tzq-btn--warning {
background: var(--tzq-gradient-warning);
color: var(--tzq-text-primary);
box-shadow: var(--tzq-shadow-warning);
}
.tzq-btn--outline {
background: transparent;
border-color: var(--tzq-primary);
color: var(--tzq-primary);
box-shadow: none;
}
.tzq-btn--outline:hover {
background: var(--tzq-primary);
color: var(--tzq-text-inverse);
box-shadow: var(--tzq-shadow-primary);
}
.tzq-btn--outline-secondary {
border-color: var(--tzq-secondary);
color: var(--tzq-secondary);
}
.tzq-btn--outline-secondary:hover {
background: var(--tzq-secondary);
color: var(--tzq-text-inverse);
}
.tzq-btn--ghost {
background: transparent;
border: 1px solid var(--tzq-primary-light);
box-shadow: none;
color: var(--tzq-primary);
}
.tzq-btn--ghost:hover {
background: var(--tzq-bg-blue-light);
}
.tzq-btn--pinterest {
background: #e60023;
color: #fff;
border-color: #e60023;
box-shadow: 0 4px 12px rgba(230, 0, 35, 0.25);
text-transform: none;
font-weight: 600;
}
.tzq-btn--pinterest:hover {
background: #bd081c;
border-color: #bd081c;
box-shadow: 0 6px 16px rgba(230, 0, 35, 0.4);
color: #fff;
}
.tzq-btn--light {
background: var(--tzq-bg-light);
color: var(--tzq-text-primary);
box-shadow: var(--tzq-shadow-sm);
}
.tzq-btn--light:hover {
background: var(--tzq-bg-light-hover);
box-shadow: var(--tzq-shadow-md);
}
.tzq-btn--retry:hover,
.tzq-btn--restart:hover,
.tzq-btn--new-game:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px var(--tzq-primary-rgba-40);
}
.tzq-btn--save,
.tzq-btn--save-score,
.tzq-btn--next-level,
.tzq-btn--continue {
padding: var(--tzq-spacing-4) var(--tzq-spacing-12);
font-size: var(--tzq-text-lg);
font-weight: 700;
color: white;
background: var(--tzq-gradient-success);
box-shadow: 0 4px 12px var(--tzq-success-rgba-30);
}
.tzq-btn--save:disabled,
.tzq-btn--save-score:disabled {
background: var(--tzq-bg-secondary);
opacity: 0.6;
box-shadow: var(--tzq-shadow-black-md);
cursor: not-allowed;
}
.tzq-btn--save:hover,
.tzq-btn--save-score:hover,
.tzq-btn--next-level:hover,
.tzq-btn--continue:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px var(--tzq-success-rgba-40);
}
.tzq-btn--game {
padding: var(--tzq-spacing-3-5) var(--tzq-spacing-8);
font-size: var(--tzq-text-base);
font-weight: 700;
border: 1px solid var(--tzq-primary-light);
border-radius: var(--tzq-radius-md);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.tzq-btn--game::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: var(--tzq-radius-md);
background: rgba(255, 255, 255, 0.2);
transform: translate(-50%, -50%);
transition:
width 0.6s,
height 0.6s;
}
.tzq-btn--game:hover::before {
width: 300px;
height: 300px;
}
.tzq-btn--game:hover {
transform: translateY(-2px);
box-shadow: var(--tzq-shadow-black-lg-alt);
}
.tzq-btn--game:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none !important;
}
.tzq-btn--game-secondary {
color: var(--tzq-primary);
background: transparent;
border: 1px solid var(--tzq-primary-light);
box-shadow: none;
}
.tzq-btn--game-secondary:hover {
background: var(--tzq-primary);
color: white;
}
.tzq-btn--sm {
padding: var(--tzq-btn-padding-sm);
font-size: var(--tzq-text-sm);
}
.tzq-btn--lg {
padding: var(--tzq-btn-padding-lg);
font-size: var(--tzq-text-lg);
}
.tzq-btn--block {
width: 100%;
display: flex;
}
@keyframes btn-pulse {
0%,
100% {
box-shadow: 0 4px 12px var(--tzq-primary-rgba-30);
}
50% {
box-shadow: 0 4px 20px var(--tzq-primary-rgba-50);
}
}
.tzq-btn--pulse {
animation: btn-pulse 2s ease-in-out infinite;
}
.tzq-btn--loading {
position: relative;
pointer-events: none;
}
.tzq-btn--loading::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid var(--tzq-primary-light);
border-top-color: transparent;
border-radius: var(--tzq-radius-md);
animation: spin 0.8s linear infinite;
}
.tzq-btn--start-game,
.tzq-start-btn {
padding: var(--tzq-spacing-4) var(--tzq-spacing-12);
font-size: var(--tzq-text-lg);
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
background: var(--tzq-gradient-primary);
color: white;
box-shadow:
0 4px 12px var(--tzq-primary-rgba-30),
0 0 0 0 var(--tzq-primary-rgba-50);
margin-bottom: var(--tzq-spacing-lg);
position: relative;
overflow: hidden;
}
.tzq-btn--start-game::before,
.tzq-start-btn::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: var(--tzq-radius-md);
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition:
width 0.6s,
height 0.6s;
}
.tzq-btn--start-game:hover::before,
.tzq-start-btn:hover::before {
width: 300px;
height: 300px;
}
.tzq-btn--start-game:hover,
.tzq-start-btn:hover {
transform: translateY(-2px);
box-shadow:
0 8px 20px var(--tzq-primary-rgba-40),
0 0 0 4px var(--tzq-primary-rgba-10);
}
.tzq-btn--xl {
padding: var(--tzq-spacing-6) var(--tzq-spacing-12);
font-size: var(--tzq-text-xl);
}
.tzq-btn__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: var(--tzq-icon-sm);
}
.tzq-btn--primary .tzq-btn__icon {
display: none;
}
.tzq-btn__text {
display: inline;
}