.custom-btn {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    padding: 6px 12px;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
}

.custom-btn:active {
    transform: scale(0.94);
}

.custom-btn-small { width: 40px; }
.custom-btn-medium { width: 80px; }
.custom-btn-large { width: 150px; }

.custom-btn-glow:hover {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

@keyframes custom-pulse {
    0% { box-shadow: 0 0 3px rgba(255, 255, 255, 0.3); }
    50% { box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); }
    100% { box-shadow: 0 0 3px rgba(255, 255, 255, 0.3); }
}

.custom-btn-pulse:hover {
    animation: custom-pulse 1.2s infinite;
}

.custom-btn-red { background-color: #dc3545; }
.custom-btn-red:hover { background-color: #c82333; }

.custom-btn-orange { background-color: #fd7e14; }
.custom-btn-orange:hover { background-color: #e76a00; }

.custom-btn-blue { background-color: #007bff; }
.custom-btn-blue:hover { background-color: #0056b3; }

.custom-btn-green { background-color: #28a745; }
.custom-btn-green:hover { background-color: #218838; }

.custom-btn-white { background-color: #ffffff; color: #000; border: 1px solid #ddd; }
.custom-btn-white:hover { background-color: #f8f9fa; }

.custom-btn-gray { background-color: #6c757d; }
.custom-btn-gray:hover { background-color: #5a6268; }

@keyframes custom-flameGlow {
    0% { box-shadow: 0 0 5px #ff5722; }
    50% { box-shadow: 0 0 15px #ff9800, 0 0 20px #ffcc00; }
    100% { box-shadow: 0 0 5px #ff5722; }
}

.custom-btn-fire {
    background: linear-gradient(45deg, #ff4500, #ff8c00, #ffcc00);
    color: white;
    background-size: 200% 200%;
    animation: custom-flameGlow 2s infinite alternate;
}

.custom-btn-fire:hover {
    background: linear-gradient(45deg, #ff5733, #ffae00, #ffea00);
    transform: scale(1.03);
}

@keyframes custom-fireFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.custom-btn-fire2 {
    background: linear-gradient(90deg, #b22222, #ff4500, #ffa500, #ffd700);
    background-size: 400% 400%;
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 14px;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    animation: custom-fireFlow 3s infinite linear, custom-flameGlow 1.5s infinite alternate;
}

.custom-btn-fire2:hover {
    background: linear-gradient(90deg, #b22222, #ff6347, #ffae00, #ffec8b);
    animation: custom-fireFlow 2s infinite linear, custom-flameGlow 1s infinite alternate;
    transform: scale(1.05);
}

.custom-btn-fire2:active {
    transform: scale(0.95);
}