Make Your HTML Buttons More Attractive With These CSS Animations

Basic CSS Button Hover Animation

Ain’t nothing wrong with keeping things simple. For most websites, a simple color change is enough to make things look great. A simple hover animation like this works great on pagination icons too! Here, we add a background colour to the original element, then on the hover state, we add a different colour. To make the colour animate and change a little smoother, we add a transition of 200 milliseconds.

.btn, .btn:hover {
     color: #fff;
 }
 .basic-hover {
     background-color: #087f79;
     transition: 0.2s;
 }
 .basic-hover:hover {
     background-color: #e04f23;
     transition: 0.2s;
 }

Animate Button Border Radius With CSS

Extending on the simple button colour transition, let’s animate the border radius. Instead of changing the radius for all corners, I’ve opted to change just the top left and bottom right corners. I think it gives the button some character. Don’t you?

.dynamic-border-radius {
     background-color: #087f79;
     transition: 0.2s;
     border-radius: 0;
 }
 .dynamic-border-radius:hover {
     background-color: #e04f23;
     transition: 0.2s;
     border-top-left-radius: 1rem;
     border-bottom-right-radius: 1rem;
 }

CSS Rubber Band Animation on Button Hover

This technique is a little more complex than the previous animation effects, but it is still super simple. First we have to define a css animation that we will refer to from the element(s) we’d like to animate. We’ll call this animation rubberBandButton.

Create the Keyframes

@keyframes rubberBandButton {
    0% { max-width: 0%; } 
    30% { max-width: 50%; }
    80% { max-width: 0%; }
    100% { max-width: 100%; }
 }

The above animation will dynamically animate the max-width of the element we’ll create later. It will first start at 0% width, then at 30% through the animation’s duration it will reach 50% of it’s parent’s width, then it will go back to 0% width at 80% through the animation and finally, at 100% it will extend to the full width of its parent.

Create the CSS Pseudo-Elements

Now that we have animation, we need to create some elements. We won’t be creating HTML elements however, these will be CSS pseudo-elements that don’t actually exist in the document, but elements we can target never-the-less. These elements are ::before and ::after elements which literally refer to before and after the element we attach them to. In the below code, our button is positioned relative because we want to make its children (pseudo-elements) constrained to it rather the document itself. By default these two new elements will also be on top of their parent, so we need to use z-index, the move them back one step or else the text will be blocked. Additionally, we’re explicitly stating they should take up the full height and width of their parent.

.rubber-band {
     position: relative;
     background-color: transparent;
 }
 .rubber-band:before, .rubber-band:after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
 }

You’ll notice in the above code, the main element, .rubber-band, has no background colour defined. That’s because we will be using these two new elements as idle and hover states. The ::before element will act as the idle or normal state, while the ::after element will be visible in the hover state.

That being said, we need to target the :hover pseudo-class of the ::after pseudo-element where will add the animation name and settings.

.rubber-band:before {
     background-color: #087f79;
 }
 .rubber-band:after {
     max-width: 0;
     background-color: #e04f23;
     transition: max-width 0.3s;
 }
 .rubber-band:hover:after {
     animation-name: rubberBandButton;
     animation-duration: 0.8s;
     animation-timing-function: ease-in-out;
     max-width: 100%;
 }

And here’s the full CSS:

.btn, .btn:hover {
     color: #fff;
 }
 .rubber-band {
     position: relative;
     background-color: transparent;
 }
 .rubber-band:before, .rubber-band:after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
 }
 .rubber-band:before {
     background-color: #087f79;
 }
 .rubber-band:after {
     max-width: 0;
     background-color: #e04f23;
     transition: max-width 0.3s;
 }
 .rubber-band:hover:after {
     animation-name: rubberBandButton;
     animation-duration: 0.8s;
     animation-timing-function: ease-in-out;
     max-width: 100%;
 }
 @keyframes rubberBandButton {
     0% {  max-width: 0%;  }
     30% {  max-width: 50%; }
     80% {  max-width: 0%; }
     100% { max-width: 100%; }
 }

CSS Button Sliding Background Hover Animation

Now that we’ve covered using CSS pseudo-elements as a background colour and hover colour, this animation will be a breeze. For this effect, instead of manipulation the width, we’ll manipulate the height. We also won’t need to create a named CSS animation since the effect will be simple downward slide.

.btn, .btn:hover {
     color: #fff;
 }
 .slide-down {
     position: relative;
     background-color: transparent;
 }
 .slide-down:before, .slide-down:after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
 }
 .slide-down:before {
     background-color: #087f79;
 }
 .slide-down:after {
     max-height: 0;
     background-color: #e04f23;
     transition: max-height 0.25s ease-in;
 }
 .slide-down:hover:after {
     max-height: 100%;
 }

Bubble Background CSS Animation on Button Hover

This technique demonstrates that you’re only limited by your own creativity. For this CSS animation effect, we’ll be doing pretty much the same as we did before, except we’ll throw in some transforms to scale and move (translate) the ::after pseudo-element. This element has also been given an explicit width and height and a border-radius of 50% so it can be a perfect circle.

.btn, .btn:hover {
     color: #fff;
 }
 .bubble {
     position: relative;
     background-color: transparent;
     overflow: hidden;
 }
 .bubble:before, .bubble:after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
 }
 .bubble:before {
     background-color: #087f79;
 }
 .bubble:after {
     width: 100px;
     height: 100px;
     left: 50%;
     background-color: #e04f23;
     transform: scale(0) translate(-50%, -50%);
     transition: transform 0.5s ease-in;
     border-radius: 50%;
 }
 .bubble:hover:after {
     transform: scale(1.5) translate(-50%, -50%);
 }

Slide In Border First

So far, we haven’t animated the ::before pseudo-element since we were purely using it as a background colour. For this animation we’ll have no initial background colour. Instead, we’ll animate the ::before element and after a slight delay, we’ll animate in the ::after element. We also need to set some styling for opacity since we don’t want these pseudo-elements to be visible before the user hovers over the button.

.border-first {
     position: relative;
     background-color: transparent;
     color: #e04f23;
     transition: color 0.3s 0.2s;
 }
 .border-first:hover {
     color: #fff;
     transition: color 0.3s 0.2s;
 }
 .border-first:before, .border-first:after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     max-width: 0;
     z-index: -1;
     transition: max-width 0.3s, opacity 0.3s;
     opacity: 0;
 }
 .border-first:before {
     background-color: transparent;
     border: 2px solid;
     border-top-color: #e04f23;
     border-bottom-color: #e04f23;
     border-right-color: transparent;
     border-left-color: transparent;
 }
 .border-first:after {
     background-color: #e04f23;
     border: 2px solid #e04f23;
     transition-delay: 0.2s;
 }
 .border-first:hover:before, .border-first:hover:after {
     max-width: 100%;
     opacity: 1;
 }
 .border-first:hover:after {
      transition-delay: 0.4s;
  }

Go Forth and Animate

Hopefully this article will get your creative juices flowing. We created CSS animations without adding any HTML elements other than the button itself and we also didn’t need a single line of JavaScript code. Remember, these can be used not only on buttons, but anchor links and even form submissions. So what button effects will you create.