CSS3 Gradient Buttons. Last week I talked about Cross-Browser CSS Gradient. Today I'm going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values.
The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc. What Is So Cool About These Buttons? Pure CSS: no image or Javascript is used. Preview The image below shows how the button will display in different browsers. Button States normal state = gradient with border and shadow styles. hover = darker gradient active = gradient is reversed, 1px down, and darker font color as well. General Styles For The Button The following code is the general styles for the .button class.
Color Gradient Styles The code below is the CSS styling for the orange button. Button Styling With CSS3 | Grains of Sand - CSS & HTML5 Demos & Templates. Νέα καρτέλα. Jquery - Change DIV background color with .click(function(){ Νέα καρτέλα. Change div color onclick css. How to Vertically Align Images with Text - CSS Tips. Learn CSS Layout. Learn CSS Layout.