@charset "utf-8";
*{
	margin: 0;
	padding: 0;
}
body{
height: 100vh;
display: flex;
justify-content: center; 
align-items: center;
background:linear-gradient(299deg, #cfe7fb99 10%, #e9f7fa 100%);}

.btn-box{ 
border: 0px solid #a0d8f8 ; 
width: 760px; 
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around; 
}

.btn-box button{ 
position: relative;
border: none;
background:linear-gradient(100deg,#a0d8f8 0%,#d7eff1 100%);
width: 300px; 
height: 80px;
margin: 40px 0;
font-size: 42px;
font-weight: 600;
font-family: serial;
color: #2c5f8a;
letter-spacing: 5px;
border-radius: 40px;
box-shadow: 11px 14px 8px rgba(0,0,0,0.5);
cursor: pointer;
overflow: hidden;
}

.btn-box button:hover{
background:linear-gradient(272deg, #d7e3ed 0%, #bfc5e7 90%);
}

.btn-box button span{ 
 position: absolute;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
transform: translate(-50%,-50%);
pointer-events: none;
animation: animate 1s ease;
}

@keyframes animate{
 from{
 width: 0;
height: 0;
opacity: 0.5;
}
to{
 width: 400;
height: 400;
opacity: 0;
}
}