How to expand a div when hover

<div></div>

div
{
background:red;
border-radius:50px;
height:100px;
left: 150px;
position: absolute;
top: 100px;
transition:             width 200ms, height 200ms, border-radius 200ms,left 200ms, top 200ms;
    -moz-transition:    width 200ms, height 200ms, border-radius 200ms,left 200ms, top 200ms;
    -ms-transition:     width 200ms, height 200ms, border-radius 200ms,left 200ms, top 200ms;
    -o-transition:      width 200ms, height 200ms, border-radius 200ms,left 200ms, top 200ms;
    -webkit-transition: width 200ms, height 200ms, border-radius 200ms,left 200ms, top 200ms;
width:100px;
}

div:hover
{
border-radius:100px;
height:200px;
left: 100px;
top: 50px;
width:200px;
}

Read More

Implementing the CSS3 Gradient Social Media Buttons

Create a text widget and add a class to your link. Here's an example for Dribbble 

<a class="button-dribbble" href="#">Follow me on Dribbble</a>

Add Gradient Social Media Button CSS to Your Style Sheet
In your theme's style.css file, place the code below. This is the global rules for all buttons:

Gradient Social Media Buttons
------------------------------------------------------------
a.button-dribbble,
a.button-facebook,
a.button-googleplus,
a.button-linkedin,
a.button-pinterest,
a.button-rss,
a.button-tumblr,
a.button-twitter {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    box-shadow: 0 1px 1px #999;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    margin: 0 20px 20px 0;
    padding: 10px 15px;
    text-align: center;
    width: 130px;
}

Add the following CSS for the Dribbble gradient social media button:
--------------------------------------------------------------------------

a.button-dribbble {
    background-color: #c93764; /* fallback color */
    background: -moz-linear-gradient(top, #ea4c89, #c93764);
    background: -ms-linear-gradient(top, #ea4c89, #c93764);
    background: -webkit-linear-gradient(top, #ea4c89, #c93764);
    border: 1px solid #c93764;
    text-shadow: 0 -1px -1px #9d2849;
}

a.button-dribbble:hover {
    background: -moz-linear-gradient(top, #c93764, #ea4c89);
    background: -ms-linear-gradient(top, #c93764, #ea4c89);
    background: -webkit-linear-gradient(top, #c93764, #ea4c89);
}

Add the following CSS for the Facebook gradient social media button:
-------------------------------------------------------------------------

a.button-facebook {
    background-color: #2b4170; /* fallback color */
    background: -moz-linear-gradient(top, #3b5998, #2b4170);
    background: -ms-linear-gradient(top, #3b5998, #2b4170);
    background: -webkit-linear-gradient(top, #3b5998, #2b4170);
    border: 1px solid #2b4170;
    text-shadow: 0 -1px -1px #1f2f52;
}

a.button-facebook:hover {
    background: -moz-linear-gradient(top, #2b4170, #3b5998);
    background: -ms-linear-gradient(top, #2b4170, #3b5998);
    background: -webkit-linear-gradient(top, #2b4170, #3b5998);
}

Add the following CSS for the Google Plus gradient social media button:
--------------------------------------------------------------------------

a.button-googleplus {
    background-color: #c33219; /* fallback color */
    background: -moz-linear-gradient(top, #e64522, #c33219);
    background: -ms-linear-gradient(top, #e64522, #c33219);
    background: -webkit-linear-gradient(top, #e64522, #c33219);
    border: 1px solid #c33219;
    text-shadow: 0 -1px -1px #972412;
}

a.button-googleplus:hover {
    background: -moz-linear-gradient(top, #c33219, #e64522);
    background: -webkit-linear-gradient(top, #c33219, #e64522);
}

Add the following CSS for the Twitter gradient social media button:
--------------------------------------------------------------------------

a.button-twitter {
    background-color: #0081ce; /* fallback color */
    background: -moz-linear-gradient(top, #00aced, #0081ce);
    background: -ms-linear-gradient(top, #00aced, #0081ce);
    background: -webkit-linear-gradient(top, #00aced, #0081ce);
    border: 1px solid #0081ce;
    text-shadow: 0 -1px -1px #005ea3;
}

a.button-twitter:hover {
    background: -moz-linear-gradient(top, #0081ce, #00aced);
    background: -ms-linear-gradient(top, #0081ce, #00aced);
    background: -webkit-linear-gradient(top, #0081ce, #00aced);
}

Read More