How To Create Buttons Using CSS3

Do you want to know how to create buttons using CSS3? Below are 4 examples of how you can create a simple button effect using various CSS3 elements, from different forms of shading to the use of borders. Standard underlined links can be hard to spot on some websites so ensure your links stand out and make users want to click on them by adding buttons to your website.

1. Simple Button Using A Gradient Shading Effect



/******  HTML  ******/

Button > within the .button div as an “a” tag

/******  CSS  ******/

.button
{text-align: center;
float: left;
padding: 1em;
margin-left: 0.25em;
background: #1D1D1D;
background: -moz-linear-gradient(#898989, #000);
background: -o-linear-gradient(#898989, #000);
background: -webkit-linear-gradient(#898989, #000);
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;}

.button a
{ color: #FFF;}

2. Simple Button Using Inset Shadow



/******  HTML  ******/

Button II > within the .button2 div as an “a” tag

/******  CSS  ******/

.button2
{text-align: center;
float: left;
padding: 1em;
margin-left: 0.25em;
background: #52A628;
-moz-box-shadow: inset 0 0 20px #2D5F15;
-webkit-box-shadow: inset 0 0 20px #2D5F15;
box-shadow: inset 0 0 20px #2D5F15;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;}

.button2 a
{ color: #FFF;}

3. Simple Button Using A Gradient Shading Effect With White Border



/******  HTML  ******/

Button III > within the .button3 div as an “a” tag

/******  CSS  ******/

.button3
{font: normal 110% Arial, Helvetica, sans-serif;
float: left;
padding: 1em;
margin-left: 0.25em;
border: 1px solid #FFF;
background: #1B14EE;
background: -moz-linear-gradient(#00B2FC, #1B14EE);
background: -o-linear-gradient(#00B2FC, #1B14EE);
background: -webkit-linear-gradient(#00B2FC, #1B14EE);
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;}

.button3 a
{ color: #FFF;}

4. Simple Button Using A Reverse Colour Effect When Hovering



/******  HTML  ******/

Button Reverse > within the .button_reverse div as an “a” tag

/******  CSS  ******/

.button_reverse
{text-align: center;
float: left;
padding: 1em;
margin-left: 0.25em;
background: #CCC;
background: -moz-linear-gradient(#EEE, #AAA);
background: -o-linear-gradient(#EEE, #AAA);
background: -webkit-linear-gradient(#EEE, #AAA);
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;}

.button_reverse a
{color: #000;
font-weight: bold;}

.button_reverse:hover
{background: #EEE;
background: -moz-linear-gradient(#AAA, #EEE);
background: -o-linear-gradient(#AAA, #EEE);
background: -webkit-linear-gradient(#AAA, #EEE);}

Back to the How To page.