5 Beautiful CSS Buttons

The following buttons are generated by the button CSS Builder: http://buttoncssgenerator.com/, and supports major mainstream browsers,

1, Deep blue professional elegance (with Shadow)

HTML: <a href= ' # ' class= ' className ' >css</a> css:. classname{line-height:46px;      height:46px;      width:154px;            Color: #ffffff;      font-size:20px;      Font-weight:bold;      font-family:arial;      Background:-webkit-gradient (linear, left top, left bottom, Color-start (0.05, #599bb3), Color-stop (1, #408c99));      Background:-moz-linear-gradient (Top, #599bb3 5, #408c99 100%);      Background:-o-linear-gradient (Top, #599bb3 5, #408c99 100%);      Background:-ms-linear-gradient (Top, #599bb3 5, #408c99 100%);      Background:linear-gradient (to bottom, #599bb3 5, #408c99 100%);      Background:-webkit-linear-gradient (Top, #599bb3 5, #408c99 100%); Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #599bb3 ', endcolorstr= ' #408c99 ', gradienttype=0      );      border:0px solid #dcdcdc;      -webkit-border-top-left-radius:8px;      -moz-border-radius-topleft:8px;      border-top-left-radius:8px;     -webkit-border-top-right-radius:8px; -moz-border-radius-topright:8px;      border-top-right-radius:8px;      -webkit-border-bottom-left-radius:8px;      -moz-border-radius-bottomleft:8px;      border-bottom-left-radius:8px;      -webkit-border-bottom-right-radius:8px;      -moz-border-radius-bottomright:8px;      border-bottom-right-radius:8px;      -moz-box-shadow:0px 10px 14px-7px #276873;      -webkit-box-shadow:0px 10px 14px-7px #276873;      box-shadow:0px 10px 14px-7px #276873;      Text-align:center;      Display:inline-block;  Text-decoration:none; }. classname:hover {background:-webkit-gradient (linear, left top, left bottom, Color-start (0.05, #408c99), CO      Lor-stop (1, #599bb3));      Background:-moz-linear-gradient (Top, #408c99 5, #599bb3 100%);      Background:-o-linear-gradient (Top, #408c99 5, #599bb3 100%);      Background:-ms-linear-gradient (Top, #408c99 5, #599bb3 100%);      Background:linear-gradient (to bottom, #408c99 5, #599bb3 100%); Background:-webkit-linear-gradient (Top, #408c99 5, #599bb3 100%); Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #408c99 ', endcolorstr= ' #599bb3 ', gradienttype=0  );   }

　　

2, light blue

. classname{line-height:30px;      height:30px;      width:80px;            Color: #ffffff;      font-size:15px;      Font-weight:bold;      font-family:arial;      Background:-webkit-gradient (linear, left top, left bottom, Color-start (0.05, #79bbff), Color-stop (1, #378de5));      Background:-moz-linear-gradient (Top, #79bbff 5, #378de5 100%);      Background:-o-linear-gradient (Top, #79bbff 5, #378de5 100%);      Background:-ms-linear-gradient (Top, #79bbff 5, #378de5 100%);      Background:linear-gradient (to bottom, #79bbff 5, #378de5 100%);      Background:-webkit-linear-gradient (Top, #79bbff 5, #378de5 100%); Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #79bbff ', endcolorstr= ' #378de5 ', gradienttype=0      );      border:1px solid #84bbf3;      -webkit-border-top-left-radius:6px;      -moz-border-radius-topleft:6px;      border-top-left-radius:6px;      -webkit-border-top-right-radius:6px;      -moz-border-radius-topright:6px; border-top-right-radius:6pX      -webkit-border-bottom-left-radius:6px;      -moz-border-radius-bottomleft:6px;      border-bottom-left-radius:6px;      -webkit-border-bottom-right-radius:6px;      -moz-border-radius-bottomright:6px;      border-bottom-right-radius:6px;      -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;      -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;      Box-shadow:inset 0px 1px 0px 0px #bbdaf7;      Text-align:center;      Display:inline-block;  Text-decoration:none; }. classname:hover {background:-webkit-gradient (linear, left top, left bottom, Color-start (0.05, #378de5), CO      Lor-stop (1, #79bbff));      Background:-moz-linear-gradient (Top, #378de5 5, #79bbff 100%);      Background:-o-linear-gradient (Top, #378de5 5, #79bbff 100%);      Background:-ms-linear-gradient (Top, #378de5 5, #79bbff 100%);      Background:linear-gradient (to bottom, #378de5 5, #79bbff 100%);      Background:-webkit-linear-gradient (Top, #378de5 5, #79bbff 100%); Filter:progid:DXImageTRansform.  Microsoft.gradient (startcolorstr= ' #378de5 ', endcolorstr= ' #79bbff ', gradienttype=0);   }

3, Orange

. classname{line-height:29px;      height:29px;      width:100px;            Color: #333333;      font-size:15px;      Font-weight:bold;      font-family:arial;      Background:-webkit-gradient (linear, left top, left bottom, Color-start (0.05, #ffec64), Color-stop (1, #ffab23));      Background:-moz-linear-gradient (Top, #ffec64 5, #ffab23 100%);      Background:-o-linear-gradient (Top, #ffec64 5, #ffab23 100%);      Background:-ms-linear-gradient (Top, #ffec64 5, #ffab23 100%);      Background:linear-gradient (to bottom, #ffec64 5, #ffab23 100%);      Background:-webkit-linear-gradient (Top, #ffec64 5, #ffab23 100%); Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #ffec64 ', endcolorstr= ' #ffab23 ', gradienttype=0      );      border:1px solid #ffaa22;      -webkit-border-top-left-radius:6px;      -moz-border-radius-topleft:6px;      border-top-left-radius:6px;      -webkit-border-top-right-radius:6px;      -moz-border-radius-topright:6px; Border-top-right-radius:6px      -webkit-border-bottom-left-radius:6px;      -moz-border-radius-bottomleft:6px;      border-bottom-left-radius:6px;      -webkit-border-bottom-right-radius:6px;      -moz-border-radius-bottomright:6px;      border-bottom-right-radius:6px;      -moz-box-shadow:inset 0px 1px 0px 0px #fff6af;      -webkit-box-shadow:inset 0px 1px 0px 0px #fff6af;      Box-shadow:inset 0px 1px 0px 0px #fff6af;      Text-align:center;      Display:inline-block;  Text-decoration:none; }. classname:hover {background:-webkit-gradient (linear, left top, left bottom, Color-start (0.05, #ffab23), CO      Lor-stop (1, #ffec64));      Background:-moz-linear-gradient (Top, #ffab23 5, #ffec64 100%);      Background:-o-linear-gradient (Top, #ffab23 5, #ffec64 100%);      Background:-ms-linear-gradient (Top, #ffab23 5, #ffec64 100%);      Background:linear-gradient (to bottom, #ffab23 5, #ffec64 100%);      Background:-webkit-linear-gradient (Top, #ffab23 5, #ffec64 100%); Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #ffab23 ', endcolorstr= ' #ffec64 ', gradienttype=0);   }

4, gray three-dimensional

. classname{line-height:34px;      height:34px;      width:84px;            Color: #3a8a9e;      font-size:16px;      Font-weight:normal;      font-family:arial;      Background:-webkit-gradient (linear, left top, left bottom, Color-start (0.05, #ededed), Color-stop (1, #bab1ba));      Background:-moz-linear-gradient (Top, #ededed 5, #bab1ba 100%);      Background:-o-linear-gradient (Top, #ededed 5, #bab1ba 100%);      Background:-ms-linear-gradient (Top, #ededed 5, #bab1ba 100%);      Background:linear-gradient (to bottom, #ededed 5, #bab1ba 100%);      Background:-webkit-linear-gradient (Top, #ededed 5, #bab1ba 100%); Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #ededed ', endcolorstr= ' #bab1ba ', gradienttype=0      );      border:1px solid #d6bcd6;      -webkit-border-top-left-radius:15px;      -moz-border-radius-topleft:15px;      border-top-left-radius:15px;      -webkit-border-top-right-radius:15px;      -moz-border-radius-topright:15px; Border-top-right-radius:15px;      -webkit-border-bottom-left-radius:15px;      -moz-border-radius-bottomleft:15px;      border-bottom-left-radius:15px;      -webkit-border-bottom-right-radius:15px;      -moz-border-radius-bottomright:15px;      border-bottom-right-radius:15px;      -moz-box-shadow:3px 4px 0px 0px #899599;      -webkit-box-shadow:3px 4px 0px 0px #899599;      box-shadow:3px 4px 0px 0px #899599;      Text-align:center;      Display:inline-block;  Text-decoration:none; }. classname:hover {background:-webkit-gradient (linear, left top, left bottom, Color-start (0.05, #bab1ba), CO      Lor-stop (1, #ededed));      Background:-moz-linear-gradient (Top, #bab1ba 5, #ededed 100%);      Background:-o-linear-gradient (Top, #bab1ba 5, #ededed 100%);      Background:-ms-linear-gradient (Top, #bab1ba 5, #ededed 100%);      Background:linear-gradient (to bottom, #bab1ba 5, #ededed 100%);      Background:-webkit-linear-gradient (Top, #bab1ba 5, #ededed 100%); Filter:progid:DXImageTransforM.microsoft.gradient (startcolorstr= ' #bab1ba ', endcolorstr= ' #ededed ', gradienttype=0);   }

5. Green Arc

. classname{
line-height:50px;
height:50px;
width:110px;
Color: #ffffff;
Background-color: #44c767;
font-size:17px;
Font-weight:normal;
font-family:arial;
border:1px solid #18ab29;
-webkit-border-top-left-radius:28px;
-moz-border-radius-topleft:28px;
border-top-left-radius:28px;
-webkit-border-top-right-radius:28px;
-moz-border-radius-topright:28px;
border-top-right-radius:28px;
-webkit-border-bottom-left-radius:28px;
-moz-border-radius-bottomleft:28px;
border-bottom-left-radius:28px;
-webkit-border-bottom-right-radius:28px;
-moz-border-radius-bottomright:28px;
border-bottom-right-radius:28px;
-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
Box-shadow:inset 0px 0px 0px 0px #ffffff;
Text-align:center;
Display:inline-block;
Text-decoration:none;
}
. classname:hover {
Background-color: #5cbf2a;
}

More good-looking button CSS please visit http://buttoncssgenerator.com/

5 Beautiful CSS Buttons