7种漂亮的CSS按钮

分类：CSS代码 时间：2009-7-21 16:02:59 浏览：2334 次

演示效果截图



用到的图片


CSS代码
<style type="text/css">
body{font-family:Arial, Helvetica, sans-serif;
font-size:13px;}
/*button style 1*/
a.button {font-weight:bold;
background: transparent url('button_right.png') no-repeat scroll top right; 
display: block;float: left;height: 34px;margin-right: 6px;
padding-right: 20px;text-decoration: none;color: #000000;
font-family: Arial, Helvetica, sans-serif;font-size:12px;}
a.button span{line-height: 22px;padding: 7px 0 5px 18px;
background: transparent url('button_left.png') no-repeat;display: block;}
a.button:hover span{text-decoration:underline;}
/*button style 2*/
a.button1 {font-weight:bold;
background: transparent url('button_right_01.png') no-repeat scroll top right; 
display: block;float: left;height: 34px;margin-right: 6px;
padding-right: 20px;text-decoration: none;color: #000000;
font-family: Arial, Helvetica, sans-serif;font-size:12px;}
a.button1 span{line-height: 22px;padding: 7px 0 5px 18px;
background: transparent url('button_left_01.png') no-repeat;display: block;}
a.button1:hover span{text-decoration:underline;}
/*button style 3*/
a.button2 {font-weight:bold;
background: transparent url('button_right_02.png') no-repeat scroll top right; 
display: block;float: left;height: 34px;margin-right: 6px;
padding-right: 20px;text-decoration: none;color: #000000;
font-family: Arial, Helvetica, sans-serif;font-size:12px;}
a.button2 span{line-height: 22px;padding: 7px 0 5px 18px;
background: transparent url('button_left_02.png') no-repeat;display: block;}
a.button2:hover span{text-decoration:underline;}
/*button style 4*/
a.button3 {font-weight:bold;
background: transparent url('button_right_03.png') no-repeat scroll top right; 
display: block;float: left;height: 34px;margin-right: 6px;
padding-right: 20px;text-decoration: none;color: #000000;
font-family: Arial, Helvetica, sans-serif;font-size:12px;}
a.button3 span{line-height: 22px;padding: 7px 0 5px 18px;
background: transparent url('button_left_03.png') no-repeat;display: block;}
a.button3:hover span{text-decoration:underline;}
/*button style 5*/
a.button4 {font-weight:bold;
background: transparent url('button_right_04.png') no-repeat scroll top right; 
display: block;float: left;height: 34px;margin-right: 6px;
padding-right: 20px;text-decoration: none;color: #000000;
font-family: Arial, Helvetica, sans-serif;font-size:12px;}
a.button4 span{line-height: 22px;padding: 7px 0 5px 18px;
background: transparent url('button_left_04.png') no-repeat;display: block;}
a.button4:hover span{text-decoration:underline;}
/*button style 6*/
a.button5 {font-weight:bold;
background: transparent url('button_right_05.png') no-repeat scroll top right; 
display: block;float: left;height: 34px;margin-right: 6px;
padding-right: 20px;text-decoration: none;color: #000000;
font-family: Arial, Helvetica, sans-serif;font-size:12px;}
a.button5 span{line-height: 22px;padding: 7px 0 5px 18px;
background: transparent url('button_left_05.png') no-repeat;display: block;}
a.button5:hover span{text-decoration:underline;}
/*button style 7*/
a.button6 {font-weight:bold;
background: transparent url('button_right_06.png') no-repeat scroll top right; 
display: block;float: left;height: 34px;margin-right: 6px;
padding-right: 20px;text-decoration: none;color: #000000;
font-family: Arial, Helvetica, sans-serif;font-size:12px;}
a.button6 span{line-height: 22px;padding: 7px 0 5px 18px;
background: transparent url('button_left_06.png') no-repeat;display: block;}
a.button6:hover span{text-decoration:underline;}
</style>


HTML代码
<a class="button" href="http://www.865171.cn">
<span>865171.cn</span></a>
<a class="button1" href="http://www.865171.cn">
<span>865171.cn</span></a>
<a class="button2" href="http://www.865171.cn">
<span>865171.cn</span></a>
<h3>www.865171.cn</h3>
<a class="button3" href="http://www.865171.cn">
<span>865171.cn</span></a>
<a class="button4" href="http://www.865171.cn">
<span>865171.cn</span></a>
<a class="button5" href="http://www.865171.cn">
<span>865171.cn</span></a>
<a class="button6" href="http://www.865171.cn">
<span>865171.cn</span></a>