Attempting to create a button that transitions its background color from blue to white and the font color from white to blue. I've reviewed similar posts for guidance.
Here is the fiddle showcasing my work: http://jsfiddle.net/t533wbuy/1/
I used this reference fiddle as inspiration: http://jsfiddle.net/visualdecree/SvjHx/
Encountering the following issues:
- Prefer the button to be an A element without using ul > li structure.
- The font color does not smoothly transition to white on hover.
CSS
.menuitem{
width: 200px;
height:30px;
background-color: #005abb;
font-size:16px;font-family: 'gotham_htfbold';
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.menuitem a{
width: 200px;
height: 30px;
display: block;
position: relative;
color: #FFF;
text-align: center;
z-index: 9999;
}
.menu-item-span{
display: none;
width: 200px;
height: 30px;
background-color: #fff;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
color:#005abb;
z-index: -999;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
HTML
-
Click here to apply
JQuery
$(function() {
$(".menuitem").find("class")
.hide()
.end()
.hover(function() {
$(this).find("span").stop(true, true).fadeIn();
}, function() {
$(this).find("span").stop(true, true).fadeOut();
});
});