body {
    background-color: lightblue;
}

.button {
    background-color: #181818; /* Black */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.btnGreen{background-color: #4CAF50;} /* Green */
.btnBlue {background-color: #008CBA;} /* Blue */
.btnRed {background-color: #f44336;} /* Red */ 
.btnGray {background-color: #888888; color: black;} /* Gray */ 
.btnBlack {background-color: #000000;} /* Black */ 


.btnTinyFont {font-size: 10px;}
.btnSmallFont {font-size: 12px;}
.btnMediumFont{font-size: 16px;}
.btnBigFont {font-size: 20px;}
.btnLargeFont{font-size: 24px;}


.btnPadA {padding: 10px 24px;}
.btnPadB  {padding: 32px 16px;}


.btnCnrSmall {border-radius: 2px;}
.btnCnrMedium {border-radius: 8px;}
.btnCnrPercent {border-radius: 50%;}


.btnBorderA {
    background-color: white;
    color: pink;
    border: 2px solid #4CAF50; /* Green */
}



.animatedButton {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.animatedButton:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}



.btnShadowA {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.btnShadowFlashType:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}