Tutorial – Pure CSS3 Fancy Hover Effect

- - Tutorials

In this tutorial we will create a fancy pure css3 button hover effect, Seat se compare inspired us Initially to write this tutorial but with a different approach, you can see the hover effect in their website, we will create two versions, one button with an icon the other without the icon.

The idea behind this tutorial is to create a base background for the button with three layers inside it, each layer with a different background color and a width of 0%, on hover the three layers extend to a width of 100% with a different delay time between each layer, so be ready and let’s start the tutorial.

Note that we will only create two buttons, one with an icon and one without it, with an hover effect that starts from left to right, to learn more about the other hover effects please check out the source files.

HTML Markup:

The html markup for the button with the icon is a little different from the button without the icon.

Button without the icon :

The button without the icon start with an anchor link <a> wrapping a text div/layer with the class “txt” and the three layers “layer-1”, “layer-2”, “layer-3” that we will need for the animation effect.

The image below explain the structure and layers of the button :

Button Without the icon

Button with the icon :

The button with an icon is relatively similar to the first one above, it consist of an anchor link <a> wrapping two divs one with the class “left_part” for the text part and the second one with the class “right-part” for icon part, the “left_part” includes the text and the three layers that we will need for the animation, and “right_part” contains an image and two layers “layer-1” and “layer-2”.

The image below is the structure and layer of the button with the icon :

Button with the icon

CSS Styling :

Now lets move to the styling, first we will start by styling the anchor link <a> with the class “btn” which is the base of our buttons and the container of all the layers that we will use for the hover animation.

We set the anchor link with the class ‘btn’ position to relative, we give it a fixed width, height and a background color, then we removed the default styling using the text-decoration property, and centered the text inside it.

Below we applied some basic css styling to the text inside the button, we used the ‘raleway’ font, and give it a margin-top to center it vertically, then we set the z-index to 8 we want the text to be superior to all the other layers.

Next we will style the right and left part of the button with an icon, so let’s start with the left side first.

For the ‘Left_part’, we give it width of 200px and a height of 100% to take to full height of it parent element which is the anchor link a, then we float it to the left, make sure to position it relatively to it’s parent element, so we can set the children elements to absolute.

For the ‘right_part’ which is the icon side, we positioned it relatively like the right side, we give it a fixed width and a height, then set the background color to #eaa740, it’s a different color from the left side and we floated it to the right.

Below we give the icon image a margin top to center it vertically, then positioned it relatively and set the z-index to 8 to put in the same level as the button text.

You should get a similar result to the image below.

Result

Now we will start styling and adding the hover effect to the layers.

For the three layers “layer-1”, “layer-2” and “layer-3”, we positioned them absolutely to the parent element, we give them a top and left value of 0, we also set the width to 0 (we will stretch them to 100% on hover state) and a height of 100%.

We added a z-index to the three layers “layer-1”, “layer-2” and “layer-2”, we give each layer a different color, and used the transition property to set a duration, delay and cubic-bezier() function to create a smooth animation, note that we used a different delay values on the transition property for each layer, make sure to use the same values as below.

Next we will add the hover effect to the thee layers, on anchor link hover we want the three layers to take the full width of the parent element(which is the anchor link a), we applied the transition property to add smooth animation after for the hover state, we used a different delay value for each layer.

So far we are done with the button without the icon, we should get a nice, fancy hover effect when you open it in your browser, and we are nearly finished the button with the icon, we just need to change the background color of the layer-1 in the right side(icon side) of the button with the icon, and change the transition delay for the two layer “layer-1” and “layer-2”.

Note that we used a different transition delay for each of the two layers “layer-1” and “layer-2” on the hover state.

Get Free Update !

Join our mailing list today and receive exclusive web design tutorials and high quality free web resources.