button {
    padding: 15px 30px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    color: #fff;
    border-radius: 5px;
}


/* Button Styles */
.btn-1 { background-color: #e74c3c !important; }
.btn-1:hover { background-color: #c0392b; transform: scale(1.1); }

.btn-2 { background-color: #3498db !important; }
.btn-2:hover { background-color: #2980b9; transform: rotate(5deg); }

.btn-3 { background-color: #2ecc71 !important; }
.btn-3:hover { background-color: #27ae60; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }

.btn-4 { background-color: #9b59b6 !important; }
.btn-4:hover { background-color: #8e44ad; transform: skewX(10deg); transition: transform 0.5s;}

.btn-5 { background-color: #f1c40f !important; }
.btn-5:hover { background-color: #f39c12; transform: translateY(-10px); transition: transform 1s;}

.btn-6 { background-color: #e67e22 !important; }
.btn-6:hover { background-color: #d35400; transform: translateX(-10px); }

.btn-7 { background-color: #ecf0f1 !important; color: #2c3e50 !important; }
.btn-7:hover { background-color: #bdc3c7; transform: translateY(10px); transition: transform 1s;}

.btn-8 { background-color: #1abc9c !important; }
.btn-8:hover { background-color: #16a085; transform: scale(1.2); }

.btn-9 { background-color: #e84393 !important; }
.btn-9:hover { background-color: #d63031; transform: rotate(-5deg); }

.btn-10 { background-color: #d35400 !important; }
.btn-10:hover { background-color: #e67e22; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); }

.btn-11 { background-color: #16a085 !important; }
.btn-11:hover { background-color: #1abc9c; transform: skewY(10deg); }

.btn-12 { background-color: #2c3e50 !important; }
.btn-12:hover { background-color: #34495e; transform: translateY(10px); transition: transform 1s;}

.btn-13 { background-color: #27ae60 !important; }
.btn-13:hover { background-color: #2ecc71; transform: translateX(10px); transition: transform 1s;}

.btn-14 { background-color: #8e44ad !important; }
.btn-14:hover { background-color: #9b59b6; transform: rotate(5deg); }

.btn-15 { background-color: #f39c12 !important; }
.btn-15:hover { background-color: #f1c40f; transform: scale(0.9); }

.btn-16 { background-color: #c0392b !important; }
.btn-16:hover { background-color: #e74c3c; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); }

.btn-17 { background-color: #2980b9 !important; }
.btn-17:hover { background-color: #3498db; transform: rotate(-10deg); }

.btn-18 { background-color: #27ae60 !important; }
.btn-18:hover { background-color: #2ecc71; transform: translateX(5px); transition: transform 1s;}

.btn-19 { background-color: #d63031 !important; }
.btn-19:hover { background-color: #e84393; transform: translateY(-15px); transition: transform 1s;}

.btn-20 { background-color: #34495e !important; color:white !important; }
.btn-20:hover { background-color: #2c3e50; transform: skewX(-10deg); transition: transform 0.5s;}

.btn-21 { background-color: #16a085 !important; }
.btn-21:hover { background-color: #1abc9c; transform: translateY(15px); transition: transform 1s;}

.btn-22 { background-color: #8e44ad !important; }
.btn-22:hover { background-color: #9b59b6; transform: rotate(15deg); }

.btn-23 { background-color: #f39c12 !important; }
.btn-23:hover { background-color: #f1c40f; transform: scale(0.8); }

.btn-24 { background-color: #e74c3c !important; }
.btn-24:hover { background-color: #c0392b; transform: translateX(-15px); transition: transform 1s;}

.btn-25 { background-color: #3498db !important; }
.btn-25:hover { background-color: #2980b9; transform: translateY(-15px); transition: transform 1s;}

.btn-26 { background-color: #2ecc71 !important; }
.btn-26:hover { background-color: #27ae60; transform: rotate(360deg); transition: transform 1.5s; }

.btn-27 { background-color: #9b59b6 !important; }
.btn-27:hover { background-color: #8e44ad; transform: skewX(10deg) skewY(10deg); transition: transform 0.5s;}

.btn-28 { background-color: #f1c40f !important; }
.btn-28:hover { background-color: #f39c12; transform: scale(1.5); transition: transform 0.2s; }

.btn-29 { background-color: #e67e22 !important; }
.btn-29:hover { background-color: #d35400; transform: translateX(20px); transition: transform 1s;}

.btn-30 { background-color: #ecf0f1 !important; color: #2c3e50 !important; }
.btn-30:hover { background-color: #bdc3c7; transform: translateY(20px); transition: transform 1s;}

.btn-31 { background-color: #1abc9c !important; }
.btn-31:hover { background-color: #16a085; transform: rotate(180deg); transition: transform 1.5s;}

.btn-32 { background-color: #e84393 !important; }
.btn-32:hover { background-color: #d63031; transform: skewX(20deg); transition: transform 0.5s; }

.btn-33 { background-color: #d35400 !important; }
.btn-33:hover { background-color: #e67e22; transform: scale(1.3); }

.btn-34 { background-color: #16a085 !important; }
.btn-34:hover { background-color: #1abc9c; transform: translateY(25px); transition: transform 1s;}

.btn-35 { background-color: #2c3e50 !important; color:white !important; }
.btn-35:hover { background-color: #34495e; transform: translateX(-25px); transition: transform 1s;}

.btn-36 { background-color: #27ae60 !important; }
.btn-36:hover { background-color: #2ecc71; transform: rotate(-20deg); }

.btn-37 { background-color: #8e44ad !important; }
.btn-37:hover { background-color: #9b59b6; transform: skewY(15deg); transition: transform 0.5s;}

.btn-38 { background-color: #f39c12 !important; }
.btn-38:hover { background-color: #f1c40f; transform: scale(0.7); }

.btn-39 { background-color: #c0392b !important; }
.btn-39:hover { background-color: #e74c3c; transform: translateX(-20px); transition: transform 1s;}

.btn-40 { background-color: #2980b9 !important; }
.btn-40:hover { background-color: #3498db; transform: translateY(-20px); transition: transform 1s;}

.btn-41 { background-color: #27ae60 !important; }
.btn-41:hover { background-color: #2ecc71; transform: rotate(30deg); }

.btn-42 { background-color: #d63031 !important; }
.btn-42:hover { background-color: #e84393; transform: skewX(-20deg); transition: transform 0.5s;}

.btn-43 { background-color: #34495e !important; color:white !important; }
.btn-43:hover { background-color: #2c3e50; transform: scale(1.6); }

.btn-44 { background-color: #16a085 !important; }
.btn-44:hover { background-color: #1abc9c; transform: translateY(30px); transition: transform 1s;}

.btn-45 { background-color: #8e44ad !important; }
.btn-45:hover { background-color: #9b59b6; transform: translateX(25px); transition: transform 1s;}

.btn-46 { background-color: #f39c12 !important; }
.btn-46:hover { background-color: #f1c40f; transform: rotate(-15deg); }

.btn-47 { background-color: #e74c3c !important; }
.btn-47:hover { background-color: #c0392b; transform: skewY(-20deg); transition: transform 0.5s;}

.btn-48 { background-color: #3498db !important; }
.btn-48:hover { background-color: #2980b9; transform: scale(1.8); }

.btn-49 { background-color: #2ecc71 !important; }
.btn-49:hover { background-color: #27ae60; transform: translateX(-30px); transition: transform 0.5s;}

.btn-50 { background-color: #9b59b6 !important; }
.btn-50:hover { background-color: #8e44ad; transform: translateY(-30px); transition: transform 1s;}