7 Awesome Animated Buttons using pure CSS [Turorial & Exercises ] - DevGrow

It would not be an exaggeration to say that buttons are the most important part of any website. Think about it, almost any website you visit presents you with a Sign up / Login Button or maybe a Get Started button at first.

If we can enhance the way that buttons work, by let’s say adding animations or 3d effects on button hovering and clicking. This would make the website feel a lot more interactive and adds a little bit of fun element to the user experience.

In this tutorial, we’ll be having a look at creating 7 Animated Button Styles using only css.

This may be helpful for web designers looking for a new perspective on button styles, and most importantly for new web developers looking to make their websites creative & good.

The 7 Button Styles using CSS Animations

Before moving ahead and working on making the Animated Buttons, let’s have a look at the final product that we will be building.

Rainbow Animated Button

This button has a Rainbow Gradient on the Border that covers the entire button as soon as the user hovers over it.

Rotating Border Animation

In the inactive state, this button is a simple button with black text and black borders. But after a user hovers on the button, the border turns red starting from top left making a full rotation.

Flipping 3D Button Animation

These types of buttons are useful when there is additional information related to a user action ( for eg, Terms & Conditions )

On a mouse hover, the button flips vertically to reveal the additional content behind the button.

Color Filling Button Animation

This animation is probably one of the most widely used button animations, mainly because it looks good and is easier to implement than any of the other button animations shown above.

In these buttons, on user hover – the buttons start filling up with the selected color. The fill direction and starting point can be chosen according to user preference.

Prerequisites

Since there is no javascript involved and we will be learning stuff such as CSS Animations, Keyframes and Transitions from scratch, the prerequisites are quite minimal.

Basic HTML Knowledge ( knowledge about classes, ids, element tags etc )
Recommended to have an understanding of Basic CSS ( importantly, stuff such as positions, z-index, flexbox )

However, do not worry as you can still go through most of the tutorial without having an in-depth knowledge of the concepts mentioned above.

Installing the Required Tools

IDE ( Optional )

Since we’ll be writing code to build a HTML Website we need a Code Editor or an IDE ( Integrated Development Environment ).

If you don’t know what an IDE is, it’s a program which provides features such as Syntax Highlighting, Error Detection, and much more.

There are many popular IDE’s on the market ( Sublime text, Atom, Notepad++, etc )

But for our purposes we’ll be using Visual Studio Code, which has the most features, and is a good choice for both beginners and advanced users

Browser

Any modern browser that can run standard HTML Websites such as Google Chrome or Firefox

Understanding CSS Keyframes, Transitions and Animations

We can obviously dive right ahead into the code and get started on without understanding any of these concepts, but when you truly understand what’s behind the code that’s being written – it actually feels a lot more fun & interesting and it’s much more likely that you will retain them for a longer period of time.

CSS Transitions

Let’s say you want to make a Color Changing Square that changes its color from pink to blue whenever the user hovers over it

Using the knowledge that you already have, you might come up with a solution similar to this..

.square {
 width: 50px;
 height: 50px;
 background: pink;
}

.square:hover {
 background:blue;
}

In the above code, we assume an empty <div> container has a class of square
Firstly, let’s declare the dimensions of the square as 50px by 50px using the height and width properties
Then, we use the background property to set the default background color of the square as pink
We then make use of the :hover selector to change the background color of the square to blue whenever the mouse hovers over the square

Sounds simple right? On running the above code, you should get a result like this:

The above result might seem quite odd to you, especially the people who were expecting a smooth transition between the colors pink and blue

But there is a way to make this smooth transition to work, by using the – you guessed it – transition property!

The transition property takes 4 optional arguments

{
transition: property-name duration type delay;
}

Let’s try to apply a simple transition to the square element above.

{
transition: background 0.25s ease 0s;
}

The above transition property essentially states that:

“A Smooth Transition should occur whenever there is a change in the background property, this transition should last 0.25seconds and have a delay of 0 seconds”

Each of these transitions have an optional type parameter. This essentially provides instructions on how those 0.25 seconds are spent. The important possible values are

Ease ( default ) – the animations start slow & end slow but are fast in between
Linear – the transition does not change speed and goes in a constant linear fashion.

However, for most short transitions ( below 0.5 seconds ) this does not matter as it’s hardly noticeable by an average user on a mid-range monitor.

Applying the above transition on the square, the results are

The above transition looks much more smooth and polished compared to what we did previously.

If you’d like to learn more in-depth information about CSS Transitions you can follow the MDN ( Mozilla Developer Network )’s Free Documentation at the following link

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

CSS Keyframes

For simple one-step animations such as changing the color or filling up the button, making use of CSS Transitions should be enough.

But coming to complex animations such as the Rotating Border Animation or any multi step animation in general, the easiest way to accomplish those is to use Keyframes.

Rather than explaining what a keyframe is, here’s the keyframe code required for the following multistep animation

Multi Step Animation

Keyframes Code

@keyframes anim {
 0% {
   width: 50px;
   height: 50px;
   background:pink;
 }
 33% {
   width: 100px;
   height: 50px;
   background: pink;
 }
 66% {
   height: 100px;
   width: 100px;
   background:pink;
 }
 100% {
   height: 100px;
   width: 100px;
   background: blue;
 }
}

The above multi-step animation, has 4 steps

The Initial 50×50 Pink Square
The width of this square is increased to 100px
The height of this square is increased to 100px
The background color is changed from pink to blue

If you observe closely, the keyframes code represent exactly the same 4 steps.

Basically, a keyframes is a collection of individual frames and the time at which that frame is displayed

So the above code can be understood as,

At 0% of the time, ( initial position ) – show a square of pink background having a width and height of 50px
At 33% or 1/3rd of the time – show a rectangle of pink background having a width of 100px but a height of 100px
At 66% or 2/3rd of the time – show a square of pink background and a width and height of 100px
At the end of the animation or 100% – show a square of blue background and a width & height of 100px

As you can see, we are simply specifying what the object should look like at any point of time. The rendering engine is smart enough to automatically calculate what’s changed between the current frame and the previous frame ( for eg, in the second frame only width in increased to 100px whereas the height remains same. )

This allows for optimal rendering and smooth animations.

CSS Animations

The above keyframe has no use on its own, they ( keyframes ) are generally passed to the animation property for the animation to happen.

A standard animation property takes the following parameters

{
animation: <keyframes name> | animation duration | type | direction | delay ....
}

The animation property can take a lot of optional parameters, but for this tutorial, we’ll only need the following

Keyframes name – Exactly what it sounds like, the name of the keyframes being used.
Animation Duration – the duration of the animation
Direction – whether the keyframes should run forwards or backwards
Type – Similar to the types we discussed in transitions ( ease, linear, etc )
Delay – The amount of time to wait before starting the animation

To make use of the above @keyframes anim, we use the following code

{
animation: anim 0.5s ease forwards 0s
}

Working on the Rainbow CSS Animated Button

Now that we have understood the basic theory behind the concepts that make up these animations, it’s time to implement them!

Let’s start by writing the following HTML for the Rainbow Button

      <button class="rainbow-btn">
       <div class="rainbow-btn-inner">Click Me!</div>
     </button>

In the above code, we create a simple button using the <button> tag and inside it, add an inner div with the text Click Me!

Instead of creating a Single Element and adding the Click Me! Text, we are going with the above code because the Rainbow Button involves having 2 layers

The bottom layer consists of an always running Rainbow animation
This layer is semi-overlapped by a black container that is just small enough so that only a little part ( the borders ) of the rainbow animation is seen.
This overlapping layer become invisible on a mouse hover which exposes the complete rainbow animation underneath

Let’s first define what the two layers are and then work on each of them individually

The Bottom Layer – ( class= “rainbow-btn” )

The bottom layer should be simple enough, as it is a constantly running rainbow animation

 .rainbow-btn {
 display: flex;
 justify-content: center;
 align-items: center;
 border: none;
 height: 50px;
 width: 250px;
 border-radius: 10px;
 color: white;
 font-size: 20px;
 background: linear-gradient(
   90deg,
   #ff0000,
   #ff7300,
   #fffb00,
   #48ff00,
   #00ffd5,
   #002bff,
   #7a00ff,
   #ff00c8,
   #ff0000
 );
 animation: bpx 15s linear;
 animation-iteration-count: infinite;
}

In the above code, we first get started by declaring the element as flex and using justify-content and align-items to center the inner black container ( the front layer )
Then, we remove the default button borders by using the border: none; property and set the border-radius to 10px to give the button a more rounded look
We then set the button dimensions as 250×50 pixels
Since the background is a rainbow we use a variation of the following colors

Violet
Indigo
Blue
Green
Yellow
Orange
Red

All of these colors can be combined by putting them in the linear-gradient property and rotating these colors at any angle ( 45deg or 90deg ) to make them look better
After that, we make use of the bpx keyframe that is responsible for moving these colors across the button to give it an animated look.
Since we want the animation to basically keep running forever, we set the animation-iteration-count to infinite

Let’s now create the bpx keyframe that we discussed earlier

@keyframes bpx {
 0% {
   background-position-x: 0px;
 }
 100% {
   background-position-x: 10000px;
 }
}

To keep the rainbow colors changing, we make use of the background-position-x property.
This property basically moves the background along the x-axis ( horizontally )
For every iteration of this animation, we move the rainbow background by 10,000px in 15 seconds.
After 15 seconds, the animation keeps repeating itself because we set the iteration count to infinity

The Front Layer – ( Inner Div )

Writing the CSS Code for the Inner Div should be pretty simple because it’s only a black container that loses the background color on hover

.rainbow-btn-inner {
 background-color: black;
 height: 46px;
 width: 246px;
 border-radius: 10px;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: background-color 0.3s;
}

.rainbow-btn-inner:hover {
 background-color: transparent;
}

Firstly, we set the height and width properties just a little bit less than the rainbow layer so that the colors are visible on the border of the black container.
Then, we use flexbox properties, justify-content and align-items to center the inner text, “Click Me”
As discussed, we make the background-color transparent on hover by using the :hover css selector.
To make this background-color transition smooth, we make use of the transition property and set the duration to 0.3 seconds

And that’s it! The Rainbow Animated button should now be completely functional.

Working on the Rotating Border Animation Button

Just like how we worked on the previous button, let’s start by writing the HTML Code for this button

      <button class="translate-btn">
       <div class="up-transition"></div>
       <p class="translate-btn-text">Click Me!</p>
       <div class="low-transition"></div>
     </button>

The rotating border button also involves using two layers

The bottom layer is just a simple button that contains the Click Me text and a Black Border
The top layer consists of two divs, the up-transition and the low-transition
These <div>s are basically transparent containers that only have a red-border
One such div is placed in the top left and the other is placed on the bottom right
Both of these divs are initially zero sized ( width & height are 0 )
As soon as the button is hovered, the top left div starts expanding in two steps

Step 1 : Width Increases to 100%
Step 2: Height Increase to 100%

Then, the bottom right corner starts expanding and follows the exact same steps
Since both the <div>s are transparent and only their border is visible, the animation appears like the border is rotating starting from top left.

The Bottom Layer ( “Click Me!” Text )

.translate-btn {
 width: 250px;
 height: 50px;
 border: 2px solid black;
 background-color: white;
 font-size: 20px;
 transition: color 0.3;
 position: relative;
}

We get started by setting the dimensions of the button to 250 x 50 pixels
As discussed, we set the initial border color to black and give the button a background color of white
Then, we increase the font size to 20px
Since we are also changing the font color of inner text to red, we make use of the transition property and set the duration to 0.3 seconds
We also need to set the position type of this element as relative, this is because we are positioning the children ( top layer <div>s ) in positions such as top-left and bottom-right

The Top Layer

.up-transition,
.low-transition {
 position: absolute;
 z-index: 1;
}

.up-transition {
 top: -2px;
 left: -2px;
 border-top: 2px solid red;
 border-right: 2px solid red;
}
.low-transition {
 bottom: -2px;
 right: -2px;
 border-bottom: 2px solid red;
 border-left: 2px solid red;
}

Firstly, we set the position type of these elements to absolute. This means that they can be placed relative to the parent container ( the bottom layer )
Since this is the top layer and we want it’s red border to overlap the existing black border of the bottom layer, we set it’s z-index to 1
Then, we position the up-transition <div> in the top left using the top & left properties ( the -2px is so that this layer overlaps the existing 2px wide black border )
Similarly, we position the low-transition <div> in the bottom right by using the bottom & right properties
Lastly, we set partial borders for both of these <div>s by using the border-top, border-bottom, border-right and border-left properties

.translate-btn:hover {
 color: red;
}

.translate-btn:hover .up-transition {
 animation: anim1 0.3s ease forwards;
}

.translate-btn:hover .low-transition {
 animation: anim1 0.3s ease 0.3s forwards;
}

In the above code, we work on the changes / animations that happen when the user hovers over this button
Firstly, the font color of the inner text is changed from Black to Red by using the color property
Then, we use the anim1 keyframe ( for now let’s assume that it travels the border partially ) for the top left div so that the border travels from top left to bottom right in 0.3 seconds
Lastly, after the anim1 keyframe runs on the top left div, we make the same keyframe run on the bottom right <div> ( the bottom left div has a delay that waits for the top left <div>’s animation to finish ) so that the entire border turns red

Let’s now have a look at the keyframes for anim1 that we just used

@keyframes anim1 {
 0% {
   height: 0px;
   width: 0px;
 }
 50% {
   width: 248px;
   height: 0px;
 }
 100% {
   width: 248px;
   height: 48px;
 }
}

In the above keyframe, we first start with a zero sized div, exactly like we discussed earlier
Then, we increase the width of this invisible div to simulate that the border is traveling from left to right or right to left
Lastly, we increase the height of the invisible div to show a similar effect that the border is traveling from top to bottom or bottom to top.

And that’s it! The button should now function exactly the same as shown above.

Working on the Flipping 3D Button Animation

Let’s get started on writing the HTML Code for the 3D Flip Animated Button

 <button class="flip-btn">
       <div class="btn-back">
         By clicking &thinsp;<a href="#">here</a> &thinsp; you confirm your
         subscription
       </div>
       <div class="btn-front">Hover me!</div>
</button>

The above code consists of two <div>’s representing the front and the back of the flippable button.
On the backside of the flippable button, there is a simple text containing a link asking for confirmation of the subscription. Whereas, the frontside contains a simple “Hover me!” text.
These two <div>s are wrapped inside a parent container called flip-btn

Just like all of the buttons before, this also has two layers. But the difference is that, instead of keeping the layers transparent like before, we have two opaque layers and we see their content by flipping the button

CSS For the Parent Container

.flip-btn {
 width: 250px;
 height: 50px;
 border: none;
 background-color: transparent;
 transition: all 0.3s;
 position: relative;
}

Firstly, we set the dimensions of the parent container to that of a standard button – 250 x 50 pixels
Then, we turn the parent container invisible by removing the borders and making the background transparent
To ensure smooth transitions / flipping, we use the transition property
Since we will be positioning the child elements manually, we have to keep the parent container’s position relative using the position: relative; property

Creating the Front and Back Layer

Front Layer

.btn-front {
 background-color: lightblue;
 height: 100%;
 width: 100%;
 position: absolute;
 top: 0%;
 left: 0%;
 border-radius: 10px;
 border: 2px solid transparent;
 display: flex;
 justify-content: center;
 align-items: center;
}

We start by setting the background-color to light blue and setting the height and width to 100%
Then, we align the front layer to the parent container by using position: absolute; and setting the top & left distances to zero
After that, we add a 2px wide border and set its radius to 10px to give it a more rounded look.
Lastly, we center the inner content by using flexbox and setting justify-content and align-items

Back Layer

.btn-back {
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: white;
 top: 0%;
 left: 0%;
 transform: rotateX(180deg);
 border: 2px solid lightgrey;

 border-radius: 10px;
 display: flex;
 justify-content: center;
 align-items: center;
}

Just like the front layer, we use position: absolute; and position the element exactly in the same location as the front layer. This is so that these both layers appear to be glued together and behave like a single button.
Then, we set the width and height of this element to 100% covering the entire button.
Since this layer is on the back, the contents ( for eg, letters ) when flipped, will appear in the opposite direction – thus making the text unreadable. To avoid this, we internally flip the back layer by 180deg so that when we actually flip the button, it adds up to 180deg + 180deg = 360deg which makes the text readable
After this, we center the inner text by using justify-content and align-items properties provided by flexbox.

Adding the 3D Flipping Mechanism

.flip-btn:hover {
 transform: rotateX(180deg);
}

The flipping part should be relatively simple, as we are just rotating the entire container by 180degrees on mouse hover

In the above code, we make use of the rotateX function that rotates a container along the x-axis by any specified angle

And that finishes the process of making this button! If everything went right, your results should match with the one shown above

Exercise: Working on the Color Filling Animation Button

It is possible to make the final button using only the techniques that we learnt above. That’s why it’s best that you try making the final color filling button on your own.

Hint

This button also involves two layers

First Layer

This is simply a transparent layer with colored borders and inner text content

Background Layer

This layer consists of a container that is initially empty and is gradually filled with color on hover

Solution

HTML Code

     <div class="fill-buttons">
       <button class="fill-button">
         <div class="text-layer">Fill from Top</div>

         <div class="bg-layer-top"></div>
       </button>
       <button class="fill-button">
         <div class="text-layer">Fill from Right</div>

         <div class="bg-layer-right"></div>
       </button>
       <button class="fill-button">
         <div class="text-layer">Fill from Left</div>

         <div class="bg-layer-left"></div>
       </button>
       <button class="fill-button">
         <div class="text-layer">Fill from Bottom</div>

         <div class="bg-layer-bottom"></div>
       </button>
     </div>

CSS Code

.fill-buttons {
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
}

.fill-button {
 width: 250px;
 height: 50px;
 margin: 5px;
 background-color: transparent;
 border: 2px solid lightgreen;
 position: relative;
}

.text-layer {
 position: absolute;
 top: 0%;
 left: 0%;
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
}

.bg-layer-left,
.bg-layer-top {
 position: absolute;
 top: -1px;
 left: -1px;
 background-color: lightgreen;
 z-index: -1;
}

.bg-layer-bottom,
.bg-layer-right {
 position: absolute;
 bottom: -1px;
 right: -1px;
 background-color: lightgreen;
 z-index: -1;
}

.text-layer:hover ~ .bg-layer-left,
.text-layer:hover ~ .bg-layer-right {
 animation: fillh 0.3s ease forwards;
}
.text-layer:hover ~ .bg-layer-top,
.text-layer:hover ~ .bg-layer-bottom {
 animation: fillv 0.3s ease forwards;
}

@keyframes fillh {
 from {
   height: 50px;
   width: 0px;
 }
 to {
   height: 50px;
   width: 249px;
 }
}

@keyframes fillv {
 from {
   height: 0px;
   width: 249px;
 }
 to {
   height: 50px;
   width: 249px;
 }
}

Conclusion

Congratulations on coming this far and completing this tutorial. Hopefully, you’ve successfully finished the final exercise and really solidified all the concepts that you learnt today. We discussed a lot of topics starting from scratch such as Animations, Keyframes and Transitions. However, it doesn’t end here, there is a lot more you can explore and tons of other designs to try out. This is especially true once you start working with Javascript as it can unlock the possibilities and types of designs that are possible. If you liked this tutorial and learnt something from it, do share it with your friends!