CSS3 Demos - Button Styling
CSS3 makes it easy to style form buttons by adding shadows, curved borders and gradients. You can of course style every part of a form, but that's for another demo.
Examples and Code
DEMO 1 - Basic Button
HTML
- <input id="gobutton" type="submit" value="Go!" />
CSS
- input#gobutton{
- cursor:pointer;
- padding:5px 25px;
- background:#35b128;
- border:1px solid #33842a;
- -moz-border-radius: 10px;
- -webkit-border-radius: 10px;
- border-radius: 10px;
- -webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
- -moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
- box-shadow: 0 0 4px rgba(0,0,0, .75);
- color:#f3f3f3;
- font-size:1.1em;
- }
- input#gobutton:hover, input#gobutton:focus{
- background-color :#399630;
- -webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
- -moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
- box-shadow: 0 0 1px rgba(0,0,0, .75);
- }
DEMO 2 - Big Button
HTML
- <input id="bigbutton" type="submit" value="Big Button That Needs Clicking" />
CSS
- input#bigbutton {
- width:500px;
- background: #3e9cbf;
- padding: 8px 14px 10px;
- border:1px solid #3e9cbf;
- cursor:pointer;
- font-size:1.5em;
- font-family:Oswald, sans-serif;
- letter-spacing:.1em;
- text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3);
- color: #fff;
- -webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
- -moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
- box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
- -moz-border-radius: 10px;
- -webkit-border-radius: 10px;
- border-radius: 10px;
- }
- input#bigbutton:hover, input#bigbutton:focus {
- color:#dfe7ea;
- -webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
- -moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
- box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
- }
DEMO 3 - Submit Button with a gradient background
HTML
- <input id="submitbutton" type="button" value="Submit">
CSS
- input#submitbutton {
- border:2px groove #7c93ba;
- cursor:pointer;
- padding: 5px 25px;
- background-color:#6b6dbb;
- background: -webkit-gradient(linear, left top, left bottom, from(#88add7), to(#6b6dbb));
- background: -webkit-linear-gradient(top, #88add7, #6b6dbb);
- background: -moz-linear-gradient(top, #88add7, #6b6dbb);
- background: -o-linear-gradient(top, #88add7, #6b6dbb);
- background: linear-gradient(top, #88add7, #6b6dbb);
- font-family:Andika, Arial, sans-serif;
- color:#fff;
- font-size:1.1em;
- letter-spacing:.1em;
- font-variant:small-caps;
- -webkit-border-radius: 0 15px 15px 0;
- -moz-border-radius: 0 15px 15px 0;
- border-radius: 0 15px 15px 0;
- -webkit-box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
- -moz-box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
- box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
- }
- input#submitbutton:hover, input#submitbutton:focus {
- color:#edebda;
- -webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
- -moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
- box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
- }
DEMO 4 - Shiny Button
HTML
- <input id="shiny" type="submit" value="Clicky Click" />
CSS
- input#shiny {
- padding: 4px 20px;
- background:#ffae00;
- background: -webkit-linear-gradient(top, #ffae00, #d67600);
- background: -moz-linear-gradient(top, #ffae00, #d67600);
- background: -o-linear-gradient(top, #ffae00, #d67600);
- background: linear-gradient(top, #ffae00, #d67600);
- border:2px outset #dad9d8;
- font-family:Andika, Arial, sans-serif;
- font-size:1.1em;
- letter-spacing:0.05em;
- text-transform:uppercase;
- color:#fff;
- text-shadow: 0px 1px 10px #000;
- -webkit-border-radius: 15px;
- -moz-border-radius: 15px;
- border-radius: 15px;
- -webkit-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
- -moz-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
- box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
- }
- input#shiny:hover, input#shiny:focus {
- border:2px solid #dad9d8;
- }
DEMO 5 - Round Button
HTML
- <input id="round" type="submit" value="Push!" />
CSS
- input#round{
- width:100px;
- height:100px;
- background-color:#ff0000;
- border:1px solid #ff0000;
- color:#fff;
- font-size:1.6em;
- -webkit-border-radius: 50px;
- -moz-border-radius: 50px;
- border-radius: 50px;
- -webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
- -moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
- box-shadow: 2px 2px 15px rgba(0,0,0, .75);
- }
- input#round:hover{
- background:#c20b0b;
- border:1px solid #c20b0b;
- -webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
- -moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
- box-shadow: 0px 0px 5px rgba(0,0,0, .75);
- }
Support
CSS3 Used In The Demo
Browser Support
The demo works in all the latest browsers, including IE9 and lower with the use of CSS3Pie.
More CSS3 Demos This Way