:root {
    --primary-color: #262893;
    --secondary-color: #16A4DE;
    --hover-color: #1E237A;
    --active-color: #0E6E99;
    --white: #ffffff;
}



/* 1. Solid Primary */
.btn-1 {
    background-color: var(--primary-color);
    color: var(--white);
}
.btn-1:hover {
    background-color: var(--secondary-color);
}
.btn-1:active {
    background-color: var(--active-color);
}

/* 2. Solid Secondary */
.btn-2 {
    background-color: var(--secondary-color);
    color: var(--white);
}
.btn-2:hover {
    background-color: var(--primary-color);
}
.btn-2:active {
    transform: scale(0.95);
}

/* 3. Outline Primary */
.btn-3 {
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}
.btn-3:hover {
    background-color: var(--primary-color);
    color: var(--white);
}
.btn-3:active {
    border-color: var(--active-color);
}

/* 4. Outline Secondary */
.btn-4 {
    background-color: transparent;
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
}
.btn-4:hover {
    background-color: var(--secondary-color);
    color: var(--white);
}
.btn-4:active {
    transform: scale(0.9);
}

/* 5. Gradient Horizontal */
.btn-5 {
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    color: var(--white);
}
.btn-5:hover {
    background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
}
.btn-5:active {
    transform: scale(0.95);
}

/* 6. Gradient Vertical */
.btn-6 {
    background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
    color: var(--white);
}
.btn-6:hover {
    background: linear-gradient(to bottom, var(--secondary-color), var(--primary-color));
}
.btn-6:active {
    background: linear-gradient(to bottom, var(--primary-color), var(--active-color));
}

/* 7. Neon Glow */
.btn-7 {
    background: var(--primary-color);
    color: var(--white);
    box-shadow: 0 0 10px var(--secondary-color);
}
.btn-7:hover {
    box-shadow: 0 0 20px var(--secondary-color);
}
.btn-7:active {
    box-shadow: 0 0 5px var(--secondary-color);
}

/* 8. Pill Shape */
.btn-8 {
    background: var(--secondary-color);
    color: var(--white);
    border-radius: 50px;
}
.btn-8:hover {
    background: var(--primary-color);
}
.btn-8:active {
    transform: translateY(2px);
}

/* 9. Raised Button */
.btn-9 {
    background: var(--primary-color);
    color: var(--white);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.btn-9:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.btn-9:active {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

/* 10. Text Button */
.btn-10 {
    background: none;
    color: var(--primary-color);
    text-transform: uppercase;
    font-weight: bold;
}
.btn-10:hover {
    color: var(--secondary-color);
}
.btn-10:active {
    text-decoration: underline;
}

/* 11 to 50 – Variations of styles */
.btn-11 {
    background: var(--primary-color);
    color: var(--white);
    border: 2px dashed var(--secondary-color);
}
.btn-11:hover {
    border-style: solid;
}

/* Continue adding unique styles... */

/* Keep extending till 50 buttons */
/* 11. Dashed Border */
.btn-11 {
    background: var(--primary-color);
    color: var(--white);
    border: 2px dashed var(--secondary-color);
}
.btn-11:hover {
    border-style: solid;
}

/* 12. Shadow on Hover */
.btn-12 {
    background: var(--secondary-color);
    color: var(--white);
    box-shadow: none;
}
.btn-12:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

/* 13. Inner Glow */
.btn-13 {
    background: var(--primary-color);
    color: var(--white);
    box-shadow: inset 0 0 10px var(--secondary-color);
}
.btn-13:hover {
    box-shadow: inset 0 0 20px var(--secondary-color);
}

/* 14. Flip Animation */
.btn-14 {
    background: var(--primary-color);
    color: var(--white);
    perspective: 1000px;
    position: relative;
}
.btn-14:hover {
    transform: rotateX(180deg);
}

/* 15. Wavy Border */
.btn-15 {
    background: var(--secondary-color);
    color: var(--white);
    border: 2px solid var(--primary-color);
    border-radius: 20px;
}
.btn-15:hover {
    border-radius: 50px;
}

/* 16. Slide Background */
.btn-16 {
    background: var(--primary-color);
    color: var(--white);
    position: relative;
    overflow: hidden;
}
.btn-16::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--secondary-color);
    z-index: 0;
    transition: left 0.4s ease;
}
.btn-16:hover::before {
    left: 0;
}
.btn-16 span {
    position: relative;
    z-index: 1;
}

/* 17. Double Border */
.btn-17 {
    background: var(--primary-color);
    color: var(--white);
    border: 3px solid var(--secondary-color);
    box-shadow: 0 0 0 3px var(--primary-color);
}
.btn-17:hover {
    box-shadow: 0 0 0 6px var(--secondary-color);
}

/* 18. Rotate on Hover */
.btn-18 {
    background: var(--primary-color);
    color: var(--white);
    transition: transform 0.3s ease;
}
.btn-18:hover {
    transform: rotate(15deg);
}

/* 19. Expanding Button */
.btn-19 {
    background: var(--primary-color);
    color: var(--white);
    padding: 10px 20px;
    transition: padding 0.3s ease;
}
.btn-19:hover {
    padding: 15px 30px;
}

/* 20. Button with Icon */
.btn-20 {
    background: var(--secondary-color);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-20:hover {
    background: var(--primary-color);
}
.btn-20 i {
    font-size: 18px;
}

/* Continue in the same pattern for buttons 21–50 with unique variations */

/* 50. Ripple Effect */
.btn-50 {
    background: var(--primary-color);
    color: var(--white);
    position: relative;
    overflow: hidden;
}
.btn-50:hover {
    background: var(--secondary-color);
}
.btn-50::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: scale(0);
    opacity: 0;
    animation: ripple 0.6s linear;
}
.btn-50:active::after {
    transform: scale(1);
    opacity: 1;
}
@keyframes ripple {
    to {
        transform: scale(2);
        opacity: 0;
    }
}
/* 21. Pulse Effect */
.btn-21 {
    background: var(--primary-color);
    color: var(--white);
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* 22. Glow on Hover */
.btn-22 {
    background: var(--secondary-color);
    color: var(--white);
    transition: box-shadow 0.3s ease;
}
.btn-22:hover {
    box-shadow: 0 0 15px var(--secondary-color);
}

/* 23. Gradient Background */
.btn-23 {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    color: var(--white);
}
.btn-23:hover {
    background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
}

/* 24. Stroke Text */
.btn-24 {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    text-transform: uppercase;
}
.btn-24:hover {
    background: var(--primary-color);
    color: var(--white);
}

/* 25. Diagonal Lines */
.btn-25 {
    background: repeating-linear-gradient(
        45deg,
        var(--primary-color),
        var(--primary-color) 10px,
        var(--secondary-color) 10px,
        var(--secondary-color) 20px
    );
    color: var(--white);
}

/* 26. Shrink on Click */
.btn-26 {
    background: var(--primary-color);
    color: var(--white);
    transition: transform 0.2s ease;
}
.btn-26:active {
    transform: scale(0.9);
}

/* 27. Text Slide */
.btn-27 {
    background: var(--secondary-color);
    color: var(--white);
    overflow: hidden;
    position: relative;
}
.btn-27::before {
    content: 'Hovered!';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    white-space: nowrap;
    color: var(--primary-color);
    transition: left 0.3s ease;
}
.btn-27:hover::before {
    left: 10%;
}

/* 28. Dotted Outline */
.btn-28 {
    background: transparent;
    color: var(--secondary-color);
    border: 2px dotted var(--secondary-color);
}
.btn-28:hover {
    border-style: solid;
}

/* 29. Ripple Effect (Enhanced) */
.btn-29 {
    background: var(--primary-color);
    color: var(--white);
    position: relative;
    overflow: hidden;
}
.btn-29:active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: ripple-enhanced 0.6s linear;
}
@keyframes ripple-enhanced {
    to {
        transform: translate(-50%, -50%) scale(5);
        opacity: 0;
    }
}

/* 30. Vertical Gradient */
.btn-30 {
    background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
    color: var(--white);
}
.btn-30:hover {
    background: linear-gradient(to top, var(--secondary-color), var(--primary-color));
}

/* Buttons 31–50 */

.btn-31 { background: var(--primary-color); color: var(--white); border-radius: 5px; }
.btn-32 { background: var(--secondary-color); color: var(--white); font-style: italic; }
.btn-33 { background: var(--primary-color); color: var(--white); font-size: 14px; }
.btn-34 { background: var(--primary-color); color: var(--white); border: none; }
.btn-35 { background: var(--secondary-color); color: var(--white); font-weight: bold; }
.btn-36 { background: transparent; border: 1px solid var(--primary-color); }
.btn-37 { background: var(--primary-color); color: var(--white); border: 2px solid var(--white); }
.btn-38 { background: var(--primary-color); color: var(--white); font-family: monospace; }
.btn-39 { background: var(--secondary-color); color: var(--white); text-transform: uppercase; }
.btn-40 { background: var(--primary-color); color: var(--white); letter-spacing: 2px; }
.btn-41 { background: var(--primary-color); color: var(--white); font-variant: small-caps; }
.btn-42 { background: var(--primary-color); color: var(--white); padding: 10px 15px; }
.btn-43 { background: var(--primary-color); color: var(--white); border-radius: 50px; }
.btn-44 { background: var(--secondary-color); color: var(--white); }
.btn-45 { background: var(--primary-color); color: var(--white); }
.btn-46 { background: var(--secondary-color); color: var(--white); }
.btn-47 { background: var(--primary-color); color: var(--white); }
.btn-48 { background: var(--secondary-color); color: var(--white); }
.btn-49 { background: var(--primary-color); color: var(--white); }
.btn-50 { background: var(--secondary-color); color: var(--white); }