It's great that we can create gradient button with only CSS. We don't need any background image for creating gradient button anymore.

view plain print about
1/* it's just to create gradient button */
2
3.button {
4 display: inline-block;
5 outline: none;
6 cursor: pointer;
7 text-align: center;
8 text-decoration: none;
9 font: 14px/100% Arial, Helvetica, sans-serif;
10 padding: .5em 2em .55em;
11 text-shadow: 0 1px 1px rgba(0,0,0,.3);
12 -webkit-border-radius: .5em;
13 -moz-border-radius: .5em;
14 border-radius: .5em;
15 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
16 -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
17 box-shadow: 0 1px 2px rgba(0,0,0,.2);
18}
19.button:hover {
20 text-decoration: none;
21}
22.button:active {
23 position: relative;
24 top: 1px;
25}
view plain print about
1/* it's just to create color manipluation */
2
3.orange {
4 color: #fef4e9;
5 border: solid 1px #da7c0c;
6 background: #f78d1d;
7 background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
8 background: -moz-linear-gradient(top, #faa51a, #f47a20);
9 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
10}
11.orange:hover {
12 background: #f47c20;
13 background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
14 background: -moz-linear-gradient(top, #f88e11, #f06015);
15 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
16}
17.orange:active {
18 color: #fcd3a5;
19 background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
20 background: -moz-linear-gradient(top, #f47a20, #faa51a);
21 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
22}

view plain print about
1<!--- usage --->
2<input class="button pink" type="button" value="Submit" />

Very thanks to : http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/

This entry was posted on September 24, 2010 at 7:10 AM and has received 2339 views. There are currently 0 comments. Print this entry.