Grains Of Sand Web Design, CSS Demos & HTML5 Templates by tupence

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!" /> <!--the text in the quotes after value will appear on the button-->

CSS

  • /***FIRST STYLE THE BUTTON***/
  • input#gobutton{
  • cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
  • padding:5px 25px; /*add some padding to the inside of the button*/
  • background:#35b128; /*the colour of the button*/
  • border:1px solid #33842a; /*required or the default border for the browser will appear*/
  • /*give the button curved corners, alter the size as required*/
  • -moz-border-radius: 10px;
  • -webkit-border-radius: 10px;
  • border-radius: 10px;
  • /*give the button a drop shadow*/
  • -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);
  • /*style the text*/
  • color:#f3f3f3;
  • font-size:1.1em;
  • }
  • /***NOW STYLE THE BUTTON'S HOVER AND FOCUS STATES***/
  • input#gobutton:hover, input#gobutton:focus{
  • background-color :#399630; /*make the background a little darker*/
  • /*reduce the drop shadow size to give a pushed button effect*/
  • -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" /> <!--the text in the quotes after value will appear on the button-->

CSS

  • /***FIRST STYLE THE BUTTON***/
  • input#bigbutton {
  • width:500px;
  • background: #3e9cbf; /*the colour of the button*/
  • padding: 8px 14px 10px; /*apply some padding inside the button*/
  • border:1px solid #3e9cbf; /*required or the default border for the browser will appear*/
  • cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
  • /*style the text*/
  • font-size:1.5em;
  • font-family:Oswald, sans-serif; /*Oswald is available from http://www.google.com/webfonts/specimen/Oswald*/
  • letter-spacing:.1em;
  • text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3); /*give the text a shadow - doesn't appear in Opera 12.02 or earlier*/
  • color: #fff;
  • /*use box-shadow to give the button some depth - see cssdemos.tupence.co.uk/box-shadow.htm#demo7 for more info on this technique*/
  • -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;
  • /*give the corners a small curve*/
  • -moz-border-radius: 10px;
  • -webkit-border-radius: 10px;
  • border-radius: 10px;
  • }
  • /***SET THE BUTTON'S HOVER AND FOCUS STATES***/
  • input#bigbutton:hover, input#bigbutton:focus {
  • color:#dfe7ea;
  • /*reduce the size of the shadow to give a pushed effect*/
  • -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"> <!--the text in the quotes after value will appear on the button-->

CSS

  • /***FIRST STYLE THE BUTTON***/
  • input#submitbutton {
  • border:2px groove #7c93ba;
  • cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
  • padding: 5px 25px;
  • /*give the background a gradient - see cssdemos.tupence.co.uk/gradients.htm for more info*/
  • background-color:#6b6dbb; /*required for browsers that don't support gradients*/
  • 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);
  • /*style to the text inside the button*/
  • font-family:Andika, Arial, sans-serif; /*Andkia is available at http://www.google.com/webfonts/specimen/Andika*/
  • color:#fff;
  • font-size:1.1em;
  • letter-spacing:.1em;
  • font-variant:small-caps;
  • /*give the corners a small curve*/
  • -webkit-border-radius: 0 15px 15px 0;
  • -moz-border-radius: 0 15px 15px 0;
  • border-radius: 0 15px 15px 0;
  • /*add a drop shadow to the button*/
  • -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;
  • }
  • /***NOW STYLE THE BUTTON'S HOVER AND FOCUS STATES***/
  • input#submitbutton:hover, input#submitbutton:focus {
  • color:#edebda;
  • /*reduce the spread of the shadow to give a pushed effect*/
  • -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" /> <!--the text in the quotes after value will appear on the button-->

CSS

  • input#shiny {
  • padding: 4px 20px;
  • /*give the background a gradient*/
  • background:#ffae00; /*fallback for browsers that don't support gradients*/
  • 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;
  • /*style the text*/
  • font-family:Andika, Arial, sans-serif; /*Andkia is available at http://www.google.com/webfonts/specimen/Andika*/
  • font-size:1.1em;
  • letter-spacing:0.05em;
  • text-transform:uppercase;
  • color:#fff;
  • text-shadow: 0px 1px 10px #000;
  • /*add to small curve to the corners of the button*/
  • -webkit-border-radius: 15px;
  • -moz-border-radius: 15px;
  • border-radius: 15px;
  • /*give the button a drop shadow*/
  • -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;
  • }
  • /****NOW STYLE THE BUTTON'S HOVER STATE***/
  • 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; /*same as the height*/
  • height:100px; /*same as the width*/
  • background-color:#ff0000;
  • border:1px solid #ff0000; /*same colour as the background*/
  • color:#fff;
  • font-size:1.6em;
  • /*set the border-radius at half the size of the width and height*/
  • -webkit-border-radius: 50px;
  • -moz-border-radius: 50px;
  • border-radius: 50px;
  • /*give the button a small drop shadow*/
  • -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);
  • }
  • /***NOW STYLE THE BUTTON'S HOVER STATE***/
  • input#round:hover{
  • background:#c20b0b;
  • border:1px solid #c20b0b;
  • /*reduce the size of the shadow to give a pushed effect*/
  • -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