css button gradient color

Application of CSS3 gradient feature. You can take a look at a set of buttons. I only used CSS to create the gradient buttons (no images or Javascript required). These buttons can stretch according to the size of the font. The size of these buttons can easily adapt when padding and font size change. The best part of this method is that it can be applied to any HTML element, such as p, span, p, a, button, input, etc.

Why are these buttons so cool?

Pure CSS: no images or Javascript application.

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

Flexible and scalable: by changing font size and padding value, button size and rounded corners can be Adjustment.

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, etc.

Note: If CSS3 is not supported, it will be displayed as a normal button (without gradient and shadow).

Preview

The pictures below show the different display effects of different browsers.

Several states of the button

Normal state = gradient with bold and shadow effects.

Hover = darker gradient

Activate = reverse gradient, 1px down, with darker font.

General style of button

The following code is the general style of class .button. In order to scale freely based on changes in font size, I used em values ​​for padding and border-radius. To adjust the rounded corners and button size, simply change the border radius, font size and padding value. For example: I can make a smaller button by reducing the font-size and 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 code below is the orange css style. The background in the first line is a backup for browsers that do not support CSS3, the background in the second line is for browsers such as Webkit, the background in the third line is for Firefox, and the last line is a filter that is only recognized by Internet Explorer.

.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 to use my buttons?

For example, you like blue buttons and want to apply them to your Page:

First, copy the .button and .blue CSS.

Then, add the HTML element you want to be the button (for example Button< ;/a>), as shown below. CSS can be applied to elements such as link, p, span, p, input, button, etc.

Related articles:

HTML5 Canvas: Draw gradient color

div css background gradient code example

Detailed introduction of css gradient color omission mark embedded font text shadow