click here for a plain text version
/*
    Free Animation Energy with CSS

    (demonstration css snippets)

    (c) 2013->tomorrow! ~ cor + corz.org ;o)

    This stylesheet is freely released under the creative commons license:
    <http://creativecommons.org/licenses/by-nc-sa/1.0/>
*/



.my-link:hover {
    background: url("/img/nav/Corz-Grey-Grad-Button-Background.png") no-repeat scroll center;
}


.my-link-no-better {
    transition: all 300ms ease-out 0s;
}
.my-link-no-better:hover {
    background: url("/img/nav/Corz-Grey-Grad-Button-Background.png") no-repeat scroll center;
}


.my-link-best {
    width: 12.8rem;
    height: 12.8rem;
    transition: all 300ms ease-out 0s;
    background: url("/img/nav/Corz-Grey-Grad-Button-Background.png") no-repeat scroll center;
    background-size: 0;
}
.my-link-best:hover {
    background-size: 100%;
}

/* over-the-top version */
.my-link-crazy {
    width: 12.8rem;
    height: 12.8rem;
    transition: all 400ms ease-out 0s;
    background: url("/img/nav/Corz-Grey-Grad-Button-Background.png") no-repeat scroll center;
    background-size: 0;
}
.my-link-crazy:hover {
    background-size: 100%;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotateZ(360deg);
    transform: rotate(360deg);
}
back to the source menu
test