Html+css实现纯文字和带图标的按钮_HTML/Xhtml_网页制作

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

代码如下：

XML/HTML Code复制内容到剪贴板

1. pre>pre name="code" class="html">/span>>
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>
44. a href="" class="btn">a标签按钮a>
46. input class="inbtn btn" type="button" value="input标签按钮"/>
48. button class="bubtn btn">button标签按钮button>
50. i class="ibtn btn">i标签按钮i>
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>

至于各种标签的优缺点，还是需要大家去体会啦，如果大家有什么好玩的按钮要写，我们一起实现哦。