25 CSS Hover Effect Examples

Table of Contents

1. Basic Hover
2. Scale
3. Rotate
4. Shadow
5. Border
6. Text Color
7. Underline
8. Glow
9. Skew
10. Opacity
11. Bounce
12. Pulse
13. Shake
14. Gradient
15. 3D Push
16. Flip
17. Neon Glow
18. Ripple Effect
19. Tilt
20. Outline
21. Bubble
22. Text Reveal
23. Zoom In
24. Rainbow
25. Glitch

In this tutorial, we'll explore 25 different CSS hover effect examples. Each example comes with step-by-step instructions and code that you can easily copy and use in your projects.

1. Basic Hover

A simple color change on hover:

CSS:

.hover-example.basic {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  transition: background-color 0.3s ease;
}
.hover-example.basic:hover {
  background-color: #2980b9;
}

2. Scale

Element scales up on hover:

CSS:

.hover-example.scale {
  padding: 10px 20px;
  background-color: #2ecc71;
  color: white;
  transition: transform 0.3s ease;
}
.hover-example.scale:hover {
  transform: scale(1.1);
}

3. Rotate

Element rotates on hover:

CSS:

.hover-example.rotate {
  padding: 10px 20px;
  background-color: #e74c3c;
  color: white;
  transition: transform 0.3s ease;
}
.hover-example.rotate:hover {
  transform: rotate(15deg);
}

4. Shadow

Element gains a shadow on hover:

CSS:

.hover-example.shadow {
  padding: 10px 20px;
  background-color: #f39c12;
  color: white;
  transition: box-shadow 0.3s ease;
}
.hover-example.shadow:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

5. Border

Element changes background and text color on hover:

CSS:

.hover-example.border {
  padding: 10px 20px;
  background-color: white;
  color: #9b59b6;
  border: 2px solid #9b59b6;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.hover-example.border:hover {
  background-color: #9b59b6;
  color: white;
}

6. Text Color

Text color changes on hover:

CSS:

.hover-example.text-color {
  padding: 10px 20px;
  background-color: #34495e;
  color: white;
  transition: color 0.3s ease;
}
.hover-example.text-color:hover {
  color: #f1c40f;
}

7. Underline

Underline appears on hover:

CSS:

.hover-example.underline {
  padding: 10px 20px;
  color: #16a085;
  position: relative;
}
.hover-example.underline::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #16a085;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.hover-example.underline:hover::after {
  transform: scaleX(1);
}

8. Glow

Element glows on hover:

CSS:

.hover-example.glow {
  padding: 10px 20px;
  background-color: #8e44ad;
  color: white;
  transition: box-shadow 0.3s ease;
}
.hover-example.glow:hover {
  box-shadow: 0 0 10px #8e44ad;
}

9. Skew

Element skews on hover:

CSS:

.hover-example.skew {
  padding: 10px 20px;
  background-color: #d35400;
  color: white;
  transition: transform 0.3s ease;
}
.hover-example.skew:hover {
  transform: skew(-10deg);
}

10. Opacity

Element becomes partially transparent on hover:

CSS:

.hover-example.opacity {
  padding: 10px 20px;
  background-color: #7f8c8d;
  color: white;
  transition: opacity 0.3s ease;
}
.hover-example.opacity:hover {
  opacity: 0.7;
}

11. Bounce

Element bounces on hover:

CSS:

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.hover-example.bounce {
  padding: 10px 20px;
  background-color: #1abc9c;
  color: white;
}
.hover-example.bounce:hover {
  animation: bounce 0.5s ease infinite;
}

12. Pulse

Element pulses on hover:

CSS:

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.hover-example.pulse {
  padding: 10px 20px;
  background-color: #9b59b6;
  color: white;
}
.hover-example.pulse:hover {
  animation: pulse 0.5s ease infinite;
}

13. Shake

Element shakes on hover:

CSS:

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.hover-example.shake {
  padding: 10px 20px;
  background-color: #f39c12;
  color: white;
}
.hover-example.shake:hover {
  animation: shake 0.3s ease infinite;
}

14. Gradient

Element changes gradient on hover:

CSS:

.hover-example.gradient {
  padding: 10px 20px;
  background: linear-gradient(to right, #3498db 50%, #2980b9 50%);
  background-size: 200% 100%;
  color: white;
  transition: background-position 0.3s ease;
}
.hover-example.gradient:hover {
  background-position: 100% 0;
}

15. 3D Push

Element appears to push into the screen on hover:

CSS:

.hover-example.push-3d {
  padding: 10px 20px;
  background-color: #e67e22;
  color: white;
  transition: transform 0.3s ease;
}
.hover-example.push-3d:hover {
  transform: perspective(500px) translateZ(20px);
}

16. Flip

Element flips horizontally on hover:

CSS:

.hover-example.flip {
  padding: 10px 20px;
  background-color: #1abc9c;
  color: white;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.hover-example.flip:hover {
  transform: rotateY(180deg);
}

17. Neon Glow

Element gets a neon glow effect on hover:

CSS:

.hover-example.neon {
  padding: 10px 20px;
  background-color: #34495e;
  color: #fff;
  transition: all 0.3s ease;
}
.hover-example.neon:hover {
  box-shadow: 0 0 10px #2ecc71, 0 0 20px #2ecc71, 0 0 30px #2ecc71;
  text-shadow: 0 0 5px #2ecc71;
}

18. Ripple Effect

Element creates a ripple effect on hover:

CSS:

.hover-example.ripple {
  position: relative;
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  overflow: hidden;
}
.hover-example.ripple:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, .5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}
.hover-example.ripple:hover:after {
  animation: ripple 1s ease-out;
}
@keyframes ripple {
  0% { transform: scale(0, 0); opacity: 1; }
  20% { transform: scale(25, 25); opacity: 1; }
  100% { opacity: 0; transform: scale(40, 40); }
}

19. Tilt

Element tilts on hover:

CSS:

.hover-example.tilt {
  padding: 10px 20px;
  background-color: #e74c3c;
  color: white;
  transition: transform 0.3s ease;
}
.hover-example.tilt:hover {
  transform: rotate3d(1, 2, 0, 15deg);
}

20. Outline

Element gets an outline on hover:

CSS:

.hover-example.outline {
  padding: 10px 20px;
  background-color: #9b59b6;
  color: white;
  transition: all 0.3s ease;
}
.hover-example.outline:hover {
  outline: 2px solid #8e44ad;
  outline-offset: 4px;
}

21. Bubble

Element creates a bubble effect on hover:

CSS:

.hover-example.bubble {
  padding: 10px 20px;
  background-color: #2ecc71;
  color: white;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.hover-example.bubble:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}
.hover-example.bubble:hover:before {
  height: 100%;
}

22. Text Reveal

Element reveals hidden text on hover:

CSS:

.hover-example.text-reveal {
  padding: 10px 20px;
  background-color: #f39c12;
  color: white;
  position: relative;
  overflow: hidden;
}
.hover-example.text-reveal:after {
  content: 'Revealed!';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #d35400;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.hover-example.text-reveal:hover:after {
  transform: translateY(0);
}

23. Zoom In

Element zooms in on hover:

CSS:

.hover-example.zoom-in {
  padding: 10px 20px;
  background-color: #16a085;
  color: white;
  transition: all 0.3s ease;
}
.hover-example.zoom-in:hover {
  transform: scale(1.2);
  z-index: 1;
}

24. Rainbow

Element cycles through rainbow colors on hover:

CSS:

.hover-example.rainbow {
  padding: 10px 20px;
  background-color: #34495e;
  color: white;
}
.hover-example.rainbow:hover {
  animation: rainbow 5s linear infinite;
}
@keyframes rainbow {
  0% { background-color: #ff0000; }
  17% { background-color: #ff7f00; }
  33% { background-color: #ffff00; }
  50% { background-color: #00ff00; }
  67% { background-color: #0000ff; }
  83% { background-color: #8b00ff; }
  100% { background-color: #ff0000; }
}

25. Glitch

Element creates a glitch effect on hover:

CSS:

.hover-example.glitch {
  padding: 10px 20px;
  background-color: #2c3e50;
  color: white;
  position: relative;
}
.hover-example.glitch:hover {
  animation: glitch 0.3s linear infinite;
}
@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}