<div class="container">
  <h2>Buttons styling</h2>

  <button class="hover">Hover Me</button>

  <button class="gradient">Gradient Effect</button>

  <button class="bounce">I am bouncy</button>

  <button class="shadow">Shadow Effect</button>

  <button class="pulse">Pulse Effect</button>

  <button class="rotate">I Rotate</button>
</div>

/******** Basic Styles (Only for Demo) ********/
* {
  font-family: system-ui, sans-serif;
}

.container {
  text-align: center;
}

button {
  display: inline-block;
  margin: 10px 20px;
}

/******** Hover: START ********/
.hover {
  background-color: #007ce0;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Hover effect */
.hover:hover {
  background-color: #0056b3;
}
/******** Hover: END ********/

/******** Gradient: START ********/
/* Keyframes for gradient animation */
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient {
  background: linear-gradient(45deg, #ff6ec4, #7873f5, #4bc0c8);
  background-size: 300% 300%;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  animation: gradient 3s ease infinite;
}
/******** Gradient: END ********/

/******** Bounce: START ********/
/* Keyframes for the bounce effect */
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.bounce {
  background-color: #008080;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  animation: bounce 2s infinite;
}
/******** Bounce: END ********/

/******** Shadow: START ********/
.shadow {
  background-color: #f39c12;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease;
}

/* Shadow effect */
.shadow:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}
/******** Shadow: END ********/

/******** Pulse: START ********/
/* Keyframes for pulse effect */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.pulse {
  background-color: #e74c3c;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  animation: pulse 1.5s infinite;
}
/******** Pulse: END ********/

/******** Rotate: START ********/
/* Keyframes for rotate effect */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.rotate {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  animation: rotate 2s infinite linear;
}
/******** Rotate: END ********/