Html+css实现纯文字和带图标的按钮

本文总结一下一些基础页面元素的实现方式，后续陆续更新。首先我们遇到最多的可能是按钮的切图，按钮可能有很多种外观，但是一般可分为纯文字的和带图标的按钮，下面就来说说这两种按钮的实现方法。效果图如下：

代码如下：

1. /PRe> pre name="code" class="html"> !DOCTYPE html>      
2. html lang="zh-CN">      
3. head>      
4.   tITle> 按钮写法/title>      
5.   meta charset="UTF-8">      
6.   meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">      
7.   link rel="stylesheet" href="css/style.css">      
8. style type="text/css">      
9.   a:hover{ text-decoration: none; }      
10.   .BTn{      
11.     display: inline-block;      
12.     margin-top: 10px;      
13.     padding: 10px 24px;      
14.     border-radius: 4px;      
15.     background-color: #63b7ff;      
16.     color: #fff;      
17.     cursor: pointer;      
18.   }      
19.   .btn:hover{      
20.     background-color: #99c6ff;      
21.   }      
22.   .inbtn{      
23.     border: none;      
24.   }      
25.   .bubtn{      
26.     border: none;      
27.   }      
28.   .btn{      
29.     font-style: normal;      
30.   }      
31.   .bgbtn span{      
32.     margin-left: 10px;      
33.     padding-left: 20px;      
34.     background: url(images/edit.png) left center no-repeat;      
35.   }      
36.   .bgbtn02 img{      
37.     margin-bottom: -3px;      
38.     margin-right: 10px;      
39.   }      
40. /style>      
41. /head>      
42. body>      
43. !--a> 标签按钮-->      
44. a href="" class="btn"> a标签按钮/a>      
45. !--input> 标签按钮-->      
46. input class="inbtn btn" type="button" value="input标签按钮"/>      
47. !--button> 标签按钮-->      
48. button class="bubtn btn"> button标签按钮/button>      
49. !--任意标签按钮-->      
50. i class="ibtn btn"> i标签按钮/i>      
51. !--带背景图标按钮-->      
52. a href="" class="bgbtn btn">      
53.   span> 带图标按钮/span>      
54. /a>      
55. a href="" class="bgbtn02 btn">      
56.   img src="images/edit.png"/> 带图标按钮     
57. /a>      
58. /body>      
59. /html>      

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！