Lets get started
First of all in the HTML code you will need to go to the button and within that put a class of button, It should appear with something like this
you want to style with an id then within the tags so you should add “id=”button”.
Next you will need to go to your style sheet and this is where it starts to get fun, you will need to put in the class of the button you just wrote out which will be this .button{ }
Within the above style you can now write out the size you would like it, the color of the button, the font size, the font type and the list can go on however for now we want a simple orange hover with rounded corners. As you can see below I have already laid it out for you, it is very simple to change if you wanted a different color as its all done with CSS with a gradient so if you pick the two colors you would like then simply just change it in Background & Filter.
Styling the button
height:60px;
width:240px;
padding:0;
line-height:60px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow:inset 0px 1px 3px #cfeff3;
-moz-box-shadow:inset 0px 1px 3px #cfeff3;
-webkit-box-shadow:inset 0px 1px 3px #cfeff3;
background: -moz-linear-gradient(top, #A2DBDC 0%, #59A5A8 50%, #418F93 51%, #2F777C 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A2DBDC), color-stop(50%,#59A5A8), color-stop(51%,#418F93), color-stop(100%,#2F777C));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#A2DBDC’, endColorstr=’#2F777C’,GradientType=0 );
border:1px solid #70c9d5;
cursor:pointer;
color:#e1fdff;
font-size:24px;
letter-spacing:0px;
text-shadow:#CDF2F7 0px 1px 0, #256569 0 -1px 0;
-moz-text-shadow:#CDF2F7 0px 1px 0, #256569 0 -1px 0;
-webkit-text-shadow:#CDF2F7 0px 1px 0, #256569 0 -1px 0;
font-family:helvetica;
font-weight:lighter;
}
.button:hover{
filter:alpha(opacity=94);
opacity:0.94;
colour:#afe6e7;
}
.button:active{
background: -moz-linear-gradient(top, #95d3d4 0%, #4c9da0 51%, #318185 52%, #226b70 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#95d3d4), color-stop(51%,#4c9da0), color-stop(52%,#318185), color-stop(100%,#226b70));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#95d3d4′, endColorstr=’#226b70′,GradientType=0 );
box-shadow:inset 0px 0px 15px #256569;
-moz-box-shadow:inset 0px 0px 15px #256569;
-webkit-box-shadow: inset 0px 0px 15px #256569;
border:1px solid #256569;
line-height:62px !important;
}
And there we have it, a CSS Hover button. For more information please click here , thank you for reading and feel free to comment below if you have any questions.