Pentroy-button

by LaraSka

HTML

<button class="prim">Boost your sales</button>
<p></p>
<p></p>
 <p><img src="http://dl3.joxi.net/drive/2019/04/01/0021/2378/1403210/10/56ece29890.png" alt="Письма мастера дзен"></p>



inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>




button:after {
  background: #f2f2f2;
  height: 0; left: 0; top: 0; right: 0;
}
button:hover,
button:focus{
  background-color: #fff;
  color:#1E40E4;
}
button:hover:after,
button:focus:after{
  background: #fff;
  height: 100%;
}

CSS

.prim{ 
  border:none;
  display: inline-block;
  background: #1E40E4;
  color: #fff;
  padding: 20px 62px;
  border-radius: 5px;
  box-shadow: 0  32px 24px -20px rgb(30, 64, 228,0.80);
  cursor: pointer;
  font-family: Work Sans;
  font-weight: bold;
  font-size: 20px;
  border-radius: 5px;
  transition: all ease-in-out 300ms;
  margin-bottom:32px;
 
  }
 
  .prim:hover{ 
  box-shadow: 0  0px 0px -20px rgb(53, 49, 255);

  
  }
  
  
   .prim:active{ 
  background-color:#001A99;
  color:#AAB6E5;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 100);

  
  }




body{
  background:#D9E2FF;
}