Flat Buttons with Animated Hover Effects

A collection of flat buttons with animated hover effects. The animations are created with playing with the values of CSS transform property.

Today I would like to share some animated hover effects that I have created. Buttons seem to be quite important and used on the web but their look has been changing a lot in the last couple of years. Nowadays, web designers prefer the buttons on their web pages to be subtle and simple. Either with tiny borders or with a fill.

The buttons that I have created follow that trend but I have added some simple effects to emphasize on the hover action.

The buttons can be used as is or they can be tweaked to match the style of a project. I will also try to add some new hover styles in the future. So if you have an idea for a button you can leave a comment below or contact me.

Flat Buttons with Animated Hover Effects

Demo Download
   
   
Let have a look at the code.

Markup


I am using the Bootstrap Framework for the demo and the .btn and .btn-sm styles that are coming with the default Bootstrap CSS. I am have the following code for all the buttons to define the main properties.

a.animated-button:link, a.animated-button:visited {
 position: relative;
 display: block;
 margin: 30px auto 0;
 padding: 14px 15px;
 color: #fff;
 font-size:14px;
 font-weight: bold;
 text-align: center;
 text-decoration: none;
 text-transform: uppercase;
 overflow: hidden;
 letter-spacing: .08em;
 border-radius: 0;
 text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
 content: "";
 position: absolute;
 height: 0%;
 left: 50%;
 top: 50%;
 width: 150%;
 z-index: -1;
 -webkit-transition: all 0.75s ease 0s;
 -moz-transition: all 0.75s ease 0s;
 -o-transition: all 0.75s ease 0s;
 transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
 color: #FFF;
 text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
 height: 450%;
}
a.animated-button:link, a.animated-button:visited {
 position: relative;
 display: block;
 margin: 30px auto 0;
 padding: 14px 15px;
 color: #fff;
 font-size:14px;
 border-radius: 0;
 font-weight: bold;
 text-align: center;
 text-decoration: none;
 text-transform: uppercase;
 overflow: hidden;
 letter-spacing: .08em;
 text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 transition: all 1s ease;
}

I have named the buttons after some of the most famous deserts in the world. Let’s have a look at the ones called Victoria.

Related post:  9 Extremely Useful JS and CSS Animation Libraries for Designers

Victoria Effects Buttons


/* Victoria Buttons */

a.animated-button.victoria-one {
 border: 2px solid #D24D57;
}
a.animated-button.victoria-one:after {
 background: #D24D57;
 -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
 -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
 -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
 transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
a.animated-button.victoria-two {
 border: 2px solid #D24D57;
}
a.animated-button.victoria-two:after {
 background: #D24D57;
 -moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
 -ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
 -webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
 transform: translateX(-50%) translateY(-50%) rotate(25deg);
}
a.animated-button.victoria-three {
 border: 2px solid #D24D57;
}
a.animated-button.victoria-three:after {
 background: #D24D57;
 opacity: .5;
 -moz-transform: translateX(-50%) translateY(-50%);
 -ms-transform: translateX(-50%) translateY(-50%);
 -webkit-transform: translateX(-50%) translateY(-50%);
 transform: translateX(-50%) translateY(-50%);
}
a.animated-button.victoria-three:hover:after {
 height: 140%;
 opacity: 1;
}
a.animated-button.victoria-four {
 border: 2px solid #D24D57;
}
a.animated-button.victoria-four:after {
 background: #D24D57;
 opacity: .5;
 -moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
 -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
 -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
 transform: translateY(-50%) translateX(-50%) rotate(90deg);
}
a.animated-button.victoria-four:hover:after {
 opacity: 1;
 height: 600% !important;
}

As you can see I am playing with the values of the transform property to achieve different hover effects. The rotation value gives you the position of the hover effect, so you can adjust as you wish.

 -moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
 -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
 -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
 transform: translateY(-50%) translateX(-50%) rotate(90deg);

Pay attention to the height: 600% !important; in the :hover:after as it defines the size of the hover. If it is smaller, the hover won’t cover the whole button, so bear it in mind and test the buttons in different mobile breakpoints to prevent issues with the buttons.

Related post:  Vertical Layout with Mobile Navigation

You can check the demo to see other buttons in the bunch and download the code to play with it. Give me a shout if you have a better solution for any of the hover styles.
Thank you for stopping by.


Demo Download

Divi WordPress Theme

You may also like...

2 Responses

  1. Dave Tross says:

    Hi, I’m trying to use your fantastic button hover effects demo (http://designify.me/tutorials/flat-buttons-with-animated-hover-effects/) and I’m having trouble getting the animations to work when there’s a background image or color on the parent tag. For example,

    Read Article

    where the class “jumbotron” has a background image. The buttons colors don’t show…can you help?

  2. designify says:

    Hi Dave,
    Thanks for your question. I actually cannot understand what seems to be the problem as jumbotron is used only for the upper part where the title is. There is no such class used for the animated buttons. Have a look at this forked version of the animated buttons and you will see – http://cssdeck.com/labs/qafk2vo4. If you have issues with the buttons, you can create a snippet on cssdeck and share with me so I can help you when I see the actual code.

    Thanks again and all the best,
    Petia

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close