Rollover Dichotomy

The latest changes to the site/template have been extremely subtle and easy to miss. Yesterday I shared a CSS trick for creating rollover images. Then I did some research and found a way to animate specific attributes of a CSS class using JQuery and the color 2 plugin. I did that, spent a couple hours learning, and then, almost by accident, learned that CSS3 supports some animation functions of its own. These animation functions are called easing.  I’ve copied and pasted the code from the style.css file.

/* Rollover buttons */
.blue_button {
            color: white;
            padding: 7px 12px;
            text-align: center;
            border-radius: 5px;
            border: 1px solid #1e30da;
            background-color: #1e30da;
            box-shadow:  inset 0px 1px 1px rgba(255,255,255,0.5), 3px 3px 3px rgba(0,0,0,0.3);
            -webkit-transition: all 0.8s ease-in-out;
       -moz-transition: all 0.8s ease-in-out;
        -ms-transition: all 0.8s ease-in-out;
         -o-transition: all 0.8s ease-in-out;
            transition: all 0.8s ease-in-out;
}
.blue_button:hover{
            color: white;
            text-decoration: none;
            background-color: #333;
            border: 1px solid #fff;

}

This allowed me to remove the image buttons altogether and go with an optimal solution. Firstly, the new animation is fluid and looks amazing. It's not a toggle swap like the rollover. A CSS3 transition controls to animate the inner glow on social media buttons in the footer. Now it’s time to create a nice focus animation for the contact and newsletter form.