Animated Flat Design Button

animated-flat-design-button.markdown

Animated Flat Design Button

A button that follows the flat design trend but still has some 3D animation on hover.

A Pen by Allison Skinner on CodePen.

License.

index.html

<a href="http://allisondskinner.com">COOL FLAT BUTTON</a>

style.css

@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700');
    body {
       background: #eeff00
        }
    a {
        /*placement for code pen*/
        margin: 10% 40%;
        /*Button Text Style*/
        font-family:'Inconsolata', 'Helvetica', 'Arial',         sans-serif;
        font-size: inherit;
        text-align: center;
        font-weight: bold;
        letter-spacing: 3px;
        text-transform: uppercase;
        text-decoration:none;
        /*Button Color & Border*/
        border: 4px solid #3C14D0 ;
        color: #3C14D0;
        background: #fff;
        outline: none;
        /*Position, Display, Size*/
        position: relative;
        display: inline-block;
        padding: 15px 10px 14px;
        cursor: pointer;
        width: auto;
            }
a:after {
        /*Make a:after be as big as button*/
        position: absolute;
        width: 100%;
        height: 100%;
        /*Give a:after Border & Background color*/
        border: 2px solid #3C14D0;
        background-color: #3C14D0;
        /*Decide Location of a:after..this gives a           bottom right shadow*/
        left: 4px;
        top: 4px;
        /*Place a:after behind button*/
        z-index: -1;
        content: '';
        /*Animation/Transition Speed*/
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        
         }
a:hover {
          top:2px;
          left:2px;
            }
 a:hover:after   {
         top: -2px;
         left: -2px;
            }