<h1>Hover</h1>
<div class="container">
  <button class="btn-1">Play</button>
  <button class="btn-2">Pause</button>
</div>
body{
  background-color:#8de29e;
  text-align:center;
  font-family: Arial, Helvetica, sans-serif;
  color:#444;
}
.container{
  display:flex;
  flex-direction:row;
  flex-wrap: nowrap;
  justify-content:space-evenly;
  align-items: center;
}
button{
  margin-top:50px;
  height:200px;
  width:250px;
  border-radius: 50px;
  background: #8de29e;
  font-size:1.2em;
}
.btn-1{
    border:0;
    box-shadow:  9px 9px 12px #66a372, 
             -9px -9px 12px #b4ffca;
}
.btn-1:hover, .btn-1:focus{
box-shadow: inset 10px 10px 10px #609a6b, 
            inset -10px -10px 10px #baffd1;
}
.btn-2{
  border:4px solid #73b280;
  box-shadow:  10px 10px 32px #66a372, 
             -10px -10px 32px #b4ffca;
}
.btn-2:hover, .btn-2:focus{
  border:4px solid #6e8d74;
  box-shadow: inset 12px 12px 36px #66a372, 
            inset -12px -12px 36px #b4ffca;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.