Css Jquery Button Hover Effect, Jquery Button Fade Effect
In this tutorial we will create the css jquery button hover over the button hover with the help of css and jquery. First will create the CSS Button Hover Effect than will move to Jquery Button Fade Effect. In Jquery we will use the jquery script to make our button to change its color when we hover it. But now you are thinking that it can also be done through CSS than why we need the Jquery. So here is the ans when we use the jquery with the css than we will create the css jquery button hover at the time of button hover.
CSS Button Color Change on Hover
We use a simple button to work with and change its background color.
<input type=button id="test" name="test" value="Hover me to change the color">
Now we will create our css and use that css over that button. For using this css over the button we have 2 options
1. By describing the style on all the buttons over the website.
2. By making the class in css and use that class whenever we want.
First we will work with the first method in this we will not make any class we will write our code for the input button. It will create all the buttons with same color and effects.
<style type="text/css">
input[type=button]{background-color: lavender;}
</style>
Now your button background is of light lavender. But have you seen your button its not looking good now its looking like an aahhhh too old……. too creapy. So we will create it much better and change its properties to look it more beautiful.
input[type=button]{
background-color: #459EE9;
overflow:visible;
/* min-width: 60px;*/
padding-left: 5px;
padding-right: 5px;
border: 0;
height: 30px;
-webkit-border-radius:4px;// create the border rounded in Google Chrome
-moz-border-radius:4px; // Create the border rounded in Mozila
border-radius:4px; // Create the border rounded in IE *
cursor: pointer;
color: #fff;
}
//*If you are not getting the rounded border in IE than use this line in your <head>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
//Use padding otherwise you will see the width problem in IE7
We have changed the background color so you will see the button more clearly. Below is the new button which is designed after the new css properties.
Above is your new button now we will create the hover effect through CSS and change the background color. Add the below code to the css and you will see the black color when you hover the button
input[type=button]:hover{background: black}
So this the example of button hover color change from CSS only. Now if we use the second method than just make a css class and use that css class in your button. We are not describing it here now we will move to the Jquery Hover effect.
Jquery Button Hover
Now we will make the jquery code for changing the background color. Include Jquery in your page to run the jquery code.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Here is the code for jquery hover effect.
<script>
$("input:button").hover(function() {
$(this).stop(2000).animate({backgroundColor: 'black',color:'#fff'});
},
function() {
$(this).stop(2000).animate({backgroundColor: '#459EE9',color:'#fff'});
});
</script>
Now your button will look like this.
Thats it. Now you can use it and change your code according to your need.
Nice Effect Thank U
Useful!
You can use CSS transition ease-in-out, to make the CSS one animate.
Keep up good work.
-Motyar
this code will work with IE7 too but i think css transition will not work. I am not sure