Codexpal - Learn Programming Interactively

Lesson Content

Build Animated Buttons ✨

Create buttons that respond to user interaction with smooth animations. This makes your site feel premium!

Hover Effects

.btn {
  padding: 12px 24px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn:hover {
  background: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

Keyframe Animations

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.btn-animated {
  animation: pulse 2s infinite;
}

Example Code

Create a button with hover animation

<button class="btn">Click Me</button>

<style>
.btn {
  padding: 15px 30px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  transition: all 0.3s;
  cursor: pointer;
}
.btn:hover {
  background: #0056b3;
  transform: translateY(-2px);
}
</style>

Expected Output:

Button that animates on hover

Study Tips

•Read the theory content thoroughly before practicing
•Review the example code to understand key concepts
•Proceed to the Practice tab when you're ready to code