<button class="cp_button01">button</button>

.cp_button01 {
  position: relative;
  display: inline-block;
  width: 160px;
  padding: 1em;
  line-height: 1.4em;
  cursor: pointer;
  color: #26c6da;
  background: transparent;
  border: 1px solid #26c6da;
  border-radius: 0;
  transition: transform 0.2s, color 0.2s;
  transform: translate(0.5em -0.4em);
  z-index: 1;
}
.cp_button01:before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(38,198,218,0.5);
  transition: all 0.2s ease-in-out;
  transform: translate(0.6em, -0.3em);
  z-index: -1;
}
/*hover時の設定*/
.cp_button01:hover {
  transform: translate(0.2em, -0.1em);
  color: #ffffff;
}
.cp_button01:hover:before {
  transform: translate(-0.4em, 0.4em);
}
/*active時の設定*/
.cp_button01:active {
  transition-duration: 0.1s;
  transform: translate(0, 0);
}
.cp_button01:active:before {
  transition-duration: 0.1s;
  transform: translate(0, 0);
  background-color: rgba(38,198,218,0.5);
}
/*focus時の設定*/
.cp_button01:focus {
  color: #26c6da;
  border: 1px solid #26c6da;
}
.cp_button01:focus:hover {
  color: #ffffff;
}
.cp_button01:focus:before {
  background-color: rgba(38,198,218,0.5);
}