<div class="box">
  <p>Clearly, this is a box <br> with a box shadow :)</p>
</div>
body {
  background-color: #1A237E;
  box-sizing: border-box;
}


.box {
  margin: 0 auto;
  margin-top: 50px;
  padding: 2em;

  
  width: 400px;
  height:100px;
  
  background-color:#283593;
  border-radius: 80px;
  
/* box shadow  here*/
  box-shadow: 0 10px 15px rgba(0,0,0,0.5);
  transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);;
}

.box:hover {
  transform:scale(1.1);
  box-shadow: 0 3px 20px rgba(0,0,0,0.5);
  cursor: pointer;
/*   transform:translate(0px, -10px); */
}

.box > p {
  color: silver;
  
  text-transform: uppercase;
  text-align:center;
  
  font-size: 1.4em;
  font-weight: bold;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.