.btn { 
    text-decoration: none;
    display: inline-block;
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -o-transition: 0.3s ease;

    text-align: center;
    border-radius: 10px;
}
.btn-sm { 
    margin: 10px 0;
    padding: 15px 20px;
    font-size: 16px;
}
.btn-md { 
    margin: 14px 0;
    padding: 20px 30px;
    font-size: 24px;
}
.btn-lg { 
    margin: 18px 0;
    padding: 20px 40px;
    font-size: 36px;
}
.btn-fs { 
    margin: 18px 0;
    padding: 30px;
    font-size: 36px; display: block; width: 100%;
}
.btn-red {
    background-color: #ff0000;
    color: #fff !important;
}
.btn-red:hover {
    background-color: #a70000;
}
.btn-blue { 
    background-color: #0000ff;
    color: #fff !important;
}
.btn-blue:hover {
    background-color: #000099;
}
.btn-black { 
    background-color: #000000;
    color: #fff !important;
}
.btn-black:hover { 
    background-color: #222;
}
.btn-gray { 
    background-color: #aaaaaa; 
    color: #000 !important;
}
.btn-gray:hover {
    background-color: #888;
}
.btn-white { 
    background-color: #ffffff; 
    color: #000 !important;
}
.btn-white:hover { 
    background-color: #ddd; 
}
.btn-purple { 
    background-color: #9900e0; 
    color: #fff !important;
}
.btn-purple:hover {
    background-color: #55007c;
}
.btn-teal { 
    background-color: #008080; 
    color: #fff !important;
}
.btn-teal:hover {
    background-color: #004141;
}