 |
| Klick Image For View DEMO |
body {
font: 14px/20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: rgb(157, 181, 193);
}
a:link {
text-decoration:none;}
#valio:hover {
padding-bottom: 37px;
text-decoration: none;
background-color: rgb(229, 243, 250);
}
#valio {
position: fixed;
background: rgb(242, 242, 242);
padding: 14px;
font-size: 25px;
text-transform: uppercase;
overflow: hidden;
bottom: 0;
border: 3px solid white;
border-bottom: 0;
right: 60px;
text-align: left;
color: rgb(241, 249, 252);
z-index: 999;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
font-family: "Helvetica Condensed", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 1em;
color: rgb(68, 68, 68);
width: 135px;
}
/*
#jqueryTest:hover {
padding-bottom: 17px;
text-decoration: none;
background-color: rgb(229, 243, 250);
}
*/
#jqueryTest {
position: fixed;
background: rgb(242, 242, 242);
padding: 14px;
font-size: 25px;
text-transform: uppercase;
overflow: hidden;
bottom: 0;
border: 3px solid white;
border-bottom: 0;
right: 260px;
text-align: left;
color: rgb(241, 249, 252);
z-index: 999;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
font-family: "Helvetica Condensed", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 1em;
color: rgb(68, 68, 68);
width: 135px;
}
HTML
<a href="#" id="valio"><strong>»</strong><span>CSS Testing</span> Nomor 1</a>
<a href="#" id="jqueryTest"><strong>»</strong><span>Jquery testing</span> Nomor 2</a>
JAVASCRIPT
$('#jqueryTest').hover(function() {
$(this).animate({
'paddingBottom': 37,
'backgroundColor': 'rgb(229, 243, 250)'
}, 300, 'linear')
}, function() {
$(this).animate({
'paddingBottom': 14,
'backgroundColor': 'rgb(242, 242, 242)'
}, 300, 'linear')
})