<div class="container">
  <button class="button">
    <span class="inner">
      Click Me      
    </span>
  </button>
</div>
.container {
  background: #06d6a0;
  
  /* mostly for layout: */
  width: 30vw;
  margin: 25vh auto;
  height: 50vh;
  display:flex; 
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.button {
  border: none;
  display: block;
  height: 64px;
  width: 250px;
  background: transparent;
  transform: scale(1);
}

.inner {
  font: helvetica, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 32px;
  background-color: #118ab2;
  font-size: 24px;
  font-weight: 500;
  color: white;
  position: relative;
  width: auto;
  height: 100%;
}

.inner::before {
  transition: all 300ms ease-in-out;
  content: '';
  position: absolute;
  top: 66%;
  left: 0;
  right: 0;
  bottom: -6px;
  background: black;
  z-index: -1;
  border-radius: 32px;
  box-shadow: 0 0 36px 30px black;
  transform: scale(.7) translate(0, 0);
  opacity: .2;
}

.button:focus {
  outline: none;
}

.button:focus .inner {
  outline: none;
}

.button:focus .inner::before {
  /* purely for joy*/
  opacity: 0;
  transform: translate(0, -10px);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.