Create Stunning CSS Button Animations: A Step-by-Step Tutorial

CSS is an incredible tool for web developers, enabling the creation of engaging and visually appealing websites. One way to add a touch of flair to a webpage is through button animations. In this tutorial, we’ll explore three distinctive CSS button animations. Let’s get started!

Part 1: Fill In and Pulse

https://webdevdigest.com/wp-content/uploads/2023/08/fillPulseBoxShadow.mov

Fill In Effect

The Fill In effect gives the button a visual appearance that it’s filling in with color when hovered over or focused on. Here’s how you can achieve this effect.

HTML

<button class="fill">Fill In</button>

CSS

.fill {
  --color: #9acd32;
  --hover: #008000;
}

.fill:hover, .fill:focus {
  box-shadow: inset 0 0 0 2em var(--hover);
}

In the code snippet above, we’re defining a custom property --color for the regular state and --hover for the hover state. The box-shadow property is applied using the inset value, causing the shadow to be drawn inside the element. (screenshot)

Pulse Effect

The Pulse effect is a continuous wave of color that expands from the center of the button on hover.

HTML

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

CSS

.pulse {
  --color: #9acd32;
  --hover: #008000;
}

.pulse:hover, .pulse:focus {
  animation: pulse 1s;
  box-shadow: 0 0 0 2em transparent;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--hover);
  }
}

Here, we’re using the @keyframes rule to create the pulse animation effect, and again, custom properties are used to set the color and hover state. (screenshot)

Part 2: Close and Raise

https://webdevdigest.com/wp-content/uploads/2023/08/closeRaiseBoxShadow.mov

Close Effect

The Close effect makes the button appear as though it’s closing inward from both sides when hovered over.

HTML

<button class="close">Close</button>

CSS

.close {
  --color: #9ACD32;
  --hover: #008000;
}

.close:hover, .close:focus {
  box-shadow:
    inset -3.5em 0 0 0 var(--hover),
    inset 3.5em 0 0 0 var(--hover);
}

In this effect, we’re applying two inset shadows to create the closing appearance. (screenshot)

Raise Effect

The Raise effect makes the button appear to elevate slightly off the page when hovered over.

HTML

<button class="raise">Raise</button>

CSS

.raise {
  --color: #9ACD32;
  --hover: #008000;
}

.raise:hover, .raise:focus {
  box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
  transform: translateY(-0.75em);
}

Here, we’re combining the box-shadow property with the transform property to achieve a subtle raising effect. (screenshot)

Part 3: Fill Up and Slide

https://webdevdigest.com/wp-content/uploads/2023/08/fillUpSlideBoxShadow.mov

Fill Up Effect

The Fill Up effect makes the button look like it’s being filled from the bottom up.

HTML

<button class="up">Fill Up</button>

CSS

.up {
  --color: #9ACD32;
  --hover: #008000;
}

.up:hover, .up:focus {
  box-shadow: inset 0 -3.25em 0 0 var(--hover);
}

The key to this effect is the negative value in the box-shadow, making the shadow appear at the bottom and gradually fill up the button. (screenshot)

Slide Effect

The Slide effect makes the button look like it’s being filled from left to right.

HTML

<button class="slide">Slide</button>

CSS

.slide {
  --color: #9ACD32;
  --hover: #008000;
}

.slide:hover, .slide:focus {
  box-shadow: inset 6.5em 0 0 0 var(--hover);
}

The horizontal inset shadow creates a sliding appearance. (screenshot)

Conclusion

These CSS buttons animations add an engaging interaction experience to buttons on any webpage. By understanding these examples, you can explore and create your own unique animations. The possibilities are endless!

Note: The given snippets focus only on the animations; to see the full styling for the buttons, refer to the code provided in each part of the tutorial.

Happy coding!