Cross Browser CSS3 Gradient Button

.button { width: 160px; position:relative; display: block; margin-left: auto; margin-right: auto; text-align: center; border-radius: 4px; border: 1px solid #cb332e; color: #fff; box-shadow: inset 0px 1px 0px #f6a594; background-color: #e9503b; /* Old Browsers*/ background: -moz-linear-gradient(top, #f1745a 0%, #e9503b 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1745a), color-stop(100%,#e9503b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f1745a 0%,#e9503b 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f1745a 0%,#e9503b 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f1745a 0%,#e9503b 100%); /* IE10+ */ background: linear-gradient(top, #f1745a 0%,#e9503b 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1745a', endColorstr='#e9503b',GradientType=0 ); /* IE6-9 */ text-shadow: 0px 1px 0px #9d4333; font-size: 18px ; text-decoration: none; padding: 10px; } .button:hover { background: #f2826b; /* Old browsers */ background: -moz-linear-gradient(top, #f2826b 0%, #ea5c4a 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2826b), color-stop(100%,#ea5c4a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f2826b 0%,#ea5c4a 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f2826b 0%,#ea5c4a 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f2826b 0%,#ea5c4a 100%); /* IE10+ */ background: linear-gradient(top, #f2826b 0%,#ea5c4a 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2826b', endColorstr='#ea5c4a',GradientType=0 ); /* IE6-9 */ } .button:active { background: #e9503b; /* Old browsers */ background: -moz-linear-gradient(top, #e9503b 0%, #f1745a 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e9503b), color-stop(100%,#f1745a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e9503b 0%,#f1745a 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e9503b 0%,#f1745a 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e9503b 0%,#f1745a 100%); /* IE10+ */ background: linear-gradient(top, #e9503b 0%,#f1745a 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#e9503b', endColorstr='#f1745a',GradientType=0 ); /* IE6-9 */ }
Here's The demo : http://bit.ly/Lk9lbF
Original Post + PSD file : http://bit.ly/Lk9qvW

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.