<button class="cp_button14">button</button>

.cp_button14 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160px;
  padding: 1em;
  cursor: pointer;
  color: #283593;
  background: #26c6da;
  border: 0;
  border-radius: 50px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  transition: transform 0.2s, background-color 0.2s;
  transform: translateZ(0);
}
.cp_button14:hover {
  animation: button14 1s ease-in-out;
  color: #283593;
}
.cp_button14:active {
  background: #00acc1;
  transform: translate(2px, 2px);
}
/*アニメーション設定*/
@keyframes button14 {
  16.65% { transform: translateX(8px);}
  33.3% { transform: translateX(-6px);}
  49.95% { transform: translateX(4px);}
  66.6% { transform: translateX(-2px);}
  83.25% { transform: translateX(1px);}
  100% { transform: translateX(0);}
}