CSS button Fade color

CSS3 The application of gradient characteristics. can go to see a group of buttons, I only use CSS to create a complete gradient button (no need for pictures and JavaScript). These buttons can be scaled according to the size of the font. The size of these buttons can be easily adapted when the fill and font sizes change. The best part of this approach is that it can be applied to any HTML element, such as P, span, p, a, button, input, and so on.

Why are these buttons so cool?

Pure CSS: Apps without graphics and JavaScript.

Gradients can be applied across browsers (IE, Firefox 3.6, Chrome, and Safari).

Flexible and extensible: by changing the font size and padding values, the size and rounded corners of the buttons can be adjusted.

It has three button states: normal, hover, and active.

can be applied to any HTML element, such as a, input, button, span, p, p, H3, and so on.

Note: If CSS3 is not supported, it will be displayed as a normal button (no gradients and shadows).

Preview

The picture below shows the different display effects of different browsers.

Several states of the button

normal state = Gradient with bold and shadow effects.

Hover = deeper Gradient

activate = Reverse gradient, down 1px, with a deeper font.

General style of the button

The following code is the general style of the. button. To be free to scale based on font size changes, I used EM values when filling (padding) and boundary radius Border-radius. To adjust the size of the fillet and buttons, simply change the boundary radius, font size, and padding values. For example: I can make a smaller button by reducing the font size (font-size) and padding value (padding values).

. button {display:inline-block;outline:none;cursor:pointer;text-align:center;text-decoration:none;font:14px/100% Arial, Helvetica, sans-serif;padding:. 5em 2em. 55em;text-shadow:0 1px 1px rgba (0,0,0,.3);-webkit-border-radius:. 5em;- Moz-border-radius:. 5em;border-radius:. 5em;-webkit-box-shadow:0 1px 2px rgba (0,0,0,.2);-moz-box-shadow:0 1px 2px Rgba (0,0,0,.2); box-shadow:0 1px 2px Rgba (0,0,0,.2);}. button:hover {text-decoration:none;}. button:active {position:relative;top:1px;}

General style of color

The following code is an orange-colored CSS style. The first line of background is an alternative, for browsers that do not support CSS3, the second line of background is for webkit such browsers, the third row of background is for Firefox, the last line is filter only by the Internet Explorer identification.

.orange {color: #fef4e9; border:solid 1px #da7c0c; background: #f78d1d; Background:-webkit-gradient (linear, left top, left bottom, from (#faa51a), to (#f47a20)); Background:- Moz-linear-gradient (Top, #faa51a, #f47a20); Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' # faa51a ', endcolorstr= ' #f47a20 ');}. orange:hover {background: #f47c20; background:-webkit-gradient (linear, left top, left bottom, from (#f88e11), to (#f06015 ); background:-moz-linear-gradient (top, #f88e11, #f06015); Filter:progid:DXImageTransform.Microsoft.gradient ( Startcolorstr= ' #f88e11 ', endcolorstr= ' #f06015 ');}. orange:active {color: #fcd3a5; background:-webkit-gradient (linear, left top, left bottom, from (#f47a20), to (#faa51a)); Background:-moz-linear-gradient (top, #f47a20, #faa51a); Filter:progid:DXImageTransform.Microsoft.gradient ( Startcolorstr= ' #f47a20 ', endcolorstr= ' #faa51a ');} 

How do I use the My button?

For example, you like the blue button and want to apply it to your page:

First, copy the. button and. Blue CSS.

Then, add the HTML element that you want to be the button (such as <a href= "#" >Button</a>), for example. CSS can be applied to elements such as link, p, span, p, input, button, and so on.

Related articles:

HTML5 Canvas: Drawing gradient colors

Div+css Background Gradient color code example

CSS Gradient color ellipsis markup Embed font text shadow details

