body {  
    background: #eee;  
    height: 100vh;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    flex-direction: column;  
   }  
   h1 {  
    text-align: center;  
    margin-top: 3rem;  
   }  
   .container {  
    display: flex;  
    justify-content: center;  
    height: 300px;  
    width: 500px;  
    background-color: honeydew;  
    font-size: 2rem;  
    padding: 1rem;  
    margin: 2rem;  
   }  
   /*Button Three*/  
   .button-three {  
    text-align: center;  
    cursor: pointer;  
    font-size: 24px;  
    position: relative;  
    background-color: #f39c12;  
    border: none;  
    padding: 20px;  
    width: 200px;  
    text-align: center;  
    -webkit-transition-duration: 0.4s; /* Safari */  
    transition-duration: 0.4s;  
    text-decoration: none;  
    overflow: hidden;  
   }  
   .button-three:hover {  
    background: #fff;  
    box-shadow: 0px 2px 10px 5px #97b1bf;  
    color: #000;  
   }  
   .button-three:after {  
    content: "";  
    background: #f1c40f;  
    display: block;  
    position: absolute;  
    padding-top: 300%;  
    padding-left: 350%;  
    margin-left: -20px !important;  
    margin-top: -120%;  
    opacity: 0;  
    transition: all 0.8s;  
   }  
   .button-three:active:after {  
    padding: 0;  
    margin: 0;  
    opacity: 1;  
    transition: 0s;  
   }  