Well-known website button CSS implementation (including source code)

This article collects some well-known domestic website button style, and uses the button CSS Generator website: http://buttoncssgenerator.com to these buttons to do the implementation, the text attached these buttons CSS source code, hoped to everybody's work and the study to be helpful.

1.

<a href= ' # ' class= ' className ' > Baidu </a>.classname{line-height:39px;height:39px;width:102px;color  : #ffffff; Background-color: #3388ff; font-size:16px;font-weight:normal;font-family:arial;border:0px solid #dcdcdc;- webkit-border-top-left-radius:0px;-moz-border-radius-topleft:0px;border-top-left-radius:0px;- webkit-border-top-right-radius:0px;-moz-border-radius-topright:0px;border-top-right-radius:0px;- webkit-border-bottom-left-radius:0px;-moz-border-radius-bottomleft:0px;border-bottom-left-radius:0px;- webkit-border-bottom-right-radius:0px;-moz-border-radius-bottomright:0px;border-bottom-right-radius:0px;- 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: #3171f3;}

　　

2.

<a href= ' # ' class= ' className ' > free open shop </a>.classname{  Line-height:25px;height:25px;width:76px;color: #ffffff; Background-color: #ff4400; font-size:12px;font-weight:bold;font-family:arial;border:0px solid #dcdcdc;- webkit-border-top-left-radius:1px;/** button Fillet **/-moz-border-radius-topleft:1px;border-top-left-radius:1px;- webkit-border-top-right-radius:1px;-moz-border-radius-topright:1px;border-top-right-radius:1px;- webkit-border-bottom-left-radius:1px;-moz-border-radius-bottomleft:1px;border-bottom-left-radius:1px;- webkit-border-bottom-right-radius:1px;-moz-border-radius-bottomright:1px;border-bottom-right-radius:1px;- 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: #f22d00;}

　　

3.

<a href= ' # ' class= ' className ' > Search </a>.classname{  line-height:33px;height:33px;width:145px;color:# Ffffff;background-color: #ffb000; font-size:16px;font-weight:bold;font-family:arial;border:1px solid #e77c00;- webkit-border-top-left-radius:3px;-moz-border-radius-topleft:3px;border-top-left-radius:3px;- webkit-border-top-right-radius:3px;-moz-border-radius-topright:3px;border-top-right-radius:3px;- webkit-border-bottom-left-radius:3px;-moz-border-radius-bottomleft:3px;border-bottom-left-radius:3px;- webkit-border-bottom-right-radius:3px;-moz-border-radius-bottomright:3px;border-bottom-right-radius:3px;- moz-box-shadow:0px 1px 0px 0px #955000,-webkit-box-shadow:0px 1px 0px 0px #955000, box-shadow:0px 1px 0px 0px #955000;/** button Shadow effect **/text-align:center;display:inline-block;text-decoration:none;}. Classname:hover {background-color: #f79700;}

　　

4.

<a href= ' # ' class= ' className ' > login </a>.classname{  line-height:30px;height:30px;width:70px;color:# Ffffff;background-color: #3ba354; font-size:13px;font-weight:normal;font-family:arial;border:0px solid #e77c00;- webkit-border-top-left-radius:2px;-moz-border-radius-topleft:2px;border-top-left-radius:2px;- webkit-border-top-right-radius:2px;-moz-border-radius-topright:2px;border-top-right-radius:2px;- webkit-border-bottom-left-radius:2px;-moz-border-radius-bottomleft:2px;border-bottom-left-radius:2px;- webkit-border-bottom-right-radius:2px;-moz-border-radius-bottomright:2px;border-bottom-right-radius:2px;- moz-box-shadow:0px 0px 0px 0px #955000-webkit-box-shadow:0px 0px 0px 0px #955000 box-shadow:0px 0px 0px 0px #955000 text- Align:center;display:inline-block;text-decoration:none;}. Classname:hover {background-color: #1c9439;}

　　

5.

<a href= ' # ' class= ' ClassName ' > post </a>.classname{line-height:30px;height:30px;width:120px;color:# 000000;background-color: #3ba354; font-size:14px;font-weight:normal;font-family:simsun;background:- Webkit-gradient (linear, left top, left bottom, Color-start (0.05, #c5f0fa), Color-stop (1, #6ccddd)),/** background color gradient effect, resulting in a three-dimensional sense **/ Background:-moz-linear-gradient (Top, #c5f0fa 5, #6ccddd 100%); Background:-o-linear-gradient (Top, #c5f0fa 5, #6ccddd 100%); Background:-ms-linear-gradient (Top, #c5f0fa 5, #6ccddd 100%); Background:linear-gradient (to Bottom, #c5f0fa 5%, #6ccddd 100%); Background:-webkit-linear-gradient (Top, #c5f0fa 5, #6ccddd 100%); filter:progid:d XImageTransform.Microsoft.gradient (startcolorstr= ' #c5f0fa ', endcolorstr= ' #6ccddd ', gradienttype=0); border:1px Solid #698d91;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;- webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;- Webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;-webkit-border-bottom-right-radius:4px;- moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;-moz-box-shadow:0px 0px 0px 0px #955000;- webkit-box-shadow:0px 0px 0px 0px #955000; box-shadow:0px 0px 0px 0px #955000; text-align:center;display:inline-block; Text-decoration:none;}. Classname:hover {background-color: #1c9439; background:-webkit-gradient (linear, left top, left bottom, Color-start ( 0.05, #6ccddd), Color-stop (1, #c5f0fa)); Background:-moz-linear-gradient (Top, #6ccddd 5, #c5f0fa 100%); background:-o- Linear-gradient (Top, #6ccddd 5, #c5f0fa 100%), Background:-ms-linear-gradient (Top, #6ccddd 5, #c5f0fa 100%); Background:linear-gradient (to bottom, #6ccddd 5, #c5f0fa 100%) background:-webkit-linear-gradient (top, #6ccddd 5%, # C5F0FA 100%) filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #6ccddd ', endcolorstr= ' #c5f0fa ', gradienttype=0);}

　　

6.

<a href= ' # ' class= ' className ' > Download now </a>.classname{  Line-height:50px;height:50px;width:180px;color : #ffffff; Background-color: #46c82f; font-size:25px;font-weight:normal;font-family:arial;border:0px solid #698d91;- webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;- webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;- webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;- webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;- moz-box-shadow:0px 0px 0px 0px #955000-webkit-box-shadow:0px 0px 0px 0px #955000 box-shadow:0px 0px 0px 0px #955000 text- Align:center;display:inline-block;text-decoration:none;}. Classname:hover {background-color: #18d110;}

　　

These button CSS support major mainstream browser, the various web site buttons are different, have rounded corners, there are three-dimensional style, flat style, shaded, have a border, color is also different, these features can use the button CSS generator: http://buttoncssgenerator.com to generate.

Well-known website button CSS implementation (including source code)