CSS Animations Tasteful Example 1

<!doctype html>
<title>Example</title>
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: #f4f4f9;
  font-family: sans-serif;
  margin: 0;
}

.pulse-btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 15px 30px;
  font-size: 1.2rem;
  border-radius: 50px;
  cursor: pointer;
  outline: none;
  position: relative;
  /* Animate the button to slightly heave */
  animation: heave 2s infinite alternate ease-in-out;
}

.pulse-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50px;
  border: 2px solid #007bff;
  /* Animate the outline pulse */
  animation: ripple 2s infinite ease-out;
}

.pulse-btn:hover {
  background-color: #0056b3;
  animation-play-state: paused;
}

.pulse-btn:hover::after {
  animation-play-state: paused;
  opacity: 0;
}

.pulse-btn:active {
  scale: 0.95;
  transition: scale 0.1s;
}

@keyframes heave {
  from { transform: translateY(0); }
  to { transform: translateY(-4px); }
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}
</style>
<button class="pulse-btn">Hover & Click Me</button>