<style>
body
{
background:-webkit-gradient(radial,center center,0,center center,1200,from(#BEBEBE),to(black));
}
.menu_obj {
border: 2px solid #104669;
border-radius: 50%;
box-shadow: inset 0 0 5px 3px rgba(11, 51, 74, 0.5), 0 0 2px rgba(7, 48, 74, 1);
float: left;
height: 125px;
margin: 0 10px;
position: relative;
width: 125px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.menu_obj.home { background: #060c12 url(icon-sprites.png) no-repeat center center; }
.menu_obj.profile { background: #060c12 url(icon-sprites2.png) no-repeat center center; }
.menu_obj.contact { background: #060c12 url(icon-sprites3.png) no-repeat center center; }
.content
{
background: #000 url(icon-sprites-hover.png) no-repeat center center;
border-radius: 50%;
height: inherit;
opacity: 0;
position: absolute;
width: inherit;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.content h3
{
color: #fff;
cursor: default;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 18px;
margin: 0 10px;
opacity: 0;
padding: 40px 0 0 0;
text-align: center;
text-shadow: 0 0 10px rgba(43, 149, 205, 1);
-webkit-transform: scale(5);
-moz-transform: scale(5);
-o-transform: scale(5);
-ms-transform: scale(5);
transform: scale(5);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.content p
{
font-family: Arial, sans-serif;
font-size: 12px;
margin: 10px;
opacity: 0;
text-align: center;
text-shadow: 0 0 10px rgba(43, 149, 205, 1);
-webkit-transition: all 1.6s ease-in-out;
-moz-transition: all 1.6s ease-in-out;
-o-transition: all 1.6s ease-in-out;
-ms-transition: all 1.6s ease-in-out;
transition: all 1.6s ease-in-out;
}
.content p a
{
color: #999;
text-decoration: none;
}
.content p a:hover
{
text-decoration: underline;
}
</style>
Save your document now and preview it on your browser, you should get the something same like the following image.
The interesting part, which turn our boring button into a lively and attractive one!
.menu_obj:hover
{
box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.1), 0 0px 30px rgba(7, 48, 74, 1);
}
When user mouse over on the button / “menu_obj”, the button will animate its inner drop shadow’s color from blue to white with only 0.1 opacity. Meanwhile, animte its outer shadow from 2px to 30 px width.
.menu_obj:hover .content {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.menu_obj:hover .content h3, .menu_obj:hover .content p
{
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
That’s it! Save your work and check it out on your browser. You should have an animated button when mouse over on it!
Source:Onlywebpro
