6 Ways to code CSS buttons

Stylish buttons can be created by CSS 3. The first ones are pretty simple to code and the latter buttons become more advanced. Bear in mind that older browsers will not display these correctly so be sure to check with your preferred browsers how these will display.

Here is the first example CSS button

CSS Button

The first button is a really simple way to create a somewhat OK button. It has the class cssbtn which is applying the code shown below.

.cssbtn {background: #EB5050;
padding: 5px 15px;
float: left;
border: 1px solid #A82020;
font-weight: bold;
color: #5F0808;
font-family: “Arial Black”;
text-shadow: 1px 1px 1px #FF9494;
cursor: pointer;
box-shadow: 1px 1px;
border-radius: 5px;
}

Another CSS button

CSS Button 2

Another really simple CSS button.

.cssbtn2 {background: #EB5050;
padding: 3px 9px;
float: left;
border: 1px solid #A82020;
font-weight: bold;
color: #5F0808;
font-family: “Arial Black”;
text-shadow: 1px 1px #FF9494;
cursor: pointer;
box-shadow: 1px 1px;
border-radius: 2px;
}

A third CSS button

CSS Button 3

Code taken from this awesome CSS button guide.

.cssbtn3 {
background: #222;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}

And a fourth way to make buttons with CSS only

CSS Button 4

The third button is created with the CSS-Tricks CSS Button creator.

.cssbtn4 {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
padding: 15px 30px;
-webkit-border-radius: 21px;
-moz-border-radius: 21px;
border-radius: 21px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 20px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
.cssbtn4:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.cssbtn4:active {
border-top-color: #1b435e;
background: #1b435e;
}

A fifth way

CSS Button 5

This one is created with cssbuttongenerator.com.

.cssbtn5 {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 31px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}

.cssbtn5:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}

A sixth way

CSS Button 6

Created with bestcssbuttongenerator.com

.cssbtn6 {
-moz-box-shadow:inset 0px 1px 0px 0px #bee2f9;
-webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9;
box-shadow:inset 0px 1px 0px 0px #bee2f9;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf));
background:-moz-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
background:-webkit-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
background:-o-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
background:-ms-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
background:linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#63b8ee’, endColorstr=’#468ccf’,GradientType=0);
background-color:#63b8ee;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #3866a3;
display:inline-block;
cursor:pointer;
color:#14396a;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #7cacde;
}
.cssbtn6:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #63b8ee));
background:-moz-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
background:-webkit-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
background:-o-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
background:-ms-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
background:linear-gradient(to bottom, #468ccf 5%, #63b8ee 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#468ccf’, endColorstr=’#63b8ee’,GradientType=0);
background-color:#468ccf;
}
.cssbtn6:active {
position:relative;
top:1px;
}