Fancy Button

fancy-button.markdown

Fancy Button

A somewhat fancy button with both hover and active transitions.

A Pen by Hayden Davies on CodePen.

License.

index.html

<div class="container">
    <a href="#"><button>Click Me</button></a>
</div>

script.js

// No JS used so enjoy this ASCII button.
//
//      /¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯\
//     |       Click Me       |
//      \____________________/
//

style.css

body{
    /* A little less white */
    background: #EEE;
}

button {
    /* Set font size and padding */
    font: bold 80px Sans-Serif;
    padding: 20px;

    background: #0e8dbc;
    color: white;
    
    /* Text shadow for the 3D text effect */
    text-shadow:0 1px 0 #ccc,     /****************/
                0 2px 0 #c9c9c9,  /* This part    */
                0 3px 0 #bbb,     /* controls the */
                0 4px 0 #b9b9b9,  /* solid colors */
                0 5px 0 #aaa,     /****************/
                0 6px 1px rgba(0,0,0,.1),     /*****************/
                0 0 5px rgba(0,0,0,.1),       /* This part     */
                0 1px 3px rgba(0,0,0,.3),     /* blurs the     */
                0 3px 5px rgba(0,0,0,.2),     /* solid colors  */
                0 5px 10px rgba(0,0,0,.25),   /* and adds some */
                0 10px 10px rgba(0,0,0,.2),   /* dark shadows  */
                0 20px 20px rgba(0,0,0,.15);  /*****************/
    
    /* Box shadow, same effect as text-shadow but for the button */
    box-shadow: 0 1px 0 #0c7da6,
                0 2px 0 #0b6b8e,
                0 3px 0 #095977,
                0 4px 0 #07475f,
                0 5px 0 #053547,
                0 6px 1px rgba(0,0,0,.1),
                0 0 5px rgba(0,0,0,.1),
                0 1px 3px rgba(0,0,0,.3),
                0 3px 5px rgba(0,0,0,.2),
                0 5px 10px rgba(0,0,0,.25),
                0 10px 10px rgba(0,0,0,.2),
                0 20px 20px rgba(0,0,0,.15);

    /* Set up transitions for elements that will change*/
    transition-property: text-shadow, padding-top, padding-bottom, box-shadow, transform;
    transition-duration: 0.5s;
    
    /* Remove default (ugly) border */
    border: none;
    
    /* Give a nice round effect*/
    border-radius: 5px;
}
button:hover{
    /* On hover we want the text shadow to go */
    text-shadow: none;
    /* And the text to move down to give the */
    /* effect of it being pressed            */
    padding-top: calc(20px + 6px);
    padding-bottom: calc(20px - 6px);
}
button:active{
    /* When the button is pressed the whole    */
    /* element should move down as well as the */
    /* removal of the box-shadow               */
    text-shadow: none;
    box-shadow: none;
    transform: translate(0, 6px);
}
.container{
    /* Place the button somewhere in the middle of the screen*/
    margin: auto;
    margin-top: 5%;
    text-align: center;
}