今天小编跟大家讲解下有关Html+css实现纯文字和带图标的按钮 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关Html+css实现纯文字和带图标的按钮 的相关资料，希望小伙伴们看了有所帮助。
本文总结一下一些基础页面元素的实现方式 后续陆续更新。首先我们遇到最多的可能是按钮的切图 按钮可能有很多种外观 但是一般可分为纯文字的和带图标的按钮 下面就来说说这两种按钮的实现方法。效果图如下：
代码如下：
XML/HTML Code复制内容到剪贴板 </pre><prename="code"class="html"><!DOCTYPEhtml> <htmllang="zh-CN"> <head> <title>按钮写法</title> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=Edge,chrome=1"> <linkrel="stylesheet"href="css/style.css"> <styletype="text/css"> a:hover{text-decoration:none;} .btn{ display:inline-block; margin-top:10px; padding:10px24px; border-radius:4px; background-color:#63b7ff; color:#fff; cursor:pointer; } .btn:hover{ background-color:#99c6ff; } .inbtn{ border:none; } .bubtn{ border:none; } .btn{ font-style:normal; } .bgbtnspan{ margin-left:10px; padding-left:20px; background:url(images/edit.png)leftcenterno-repeat; } .bgbtn02img{ margin-bottom:-3px; margin-right:10px; } </style> </head> <body> <!--<a>标签按钮--> <ahref=""class="btn">a标签按钮</a> <!--<input>标签按钮--> <inputclass="inbtnbtn"type="button"value="input标签按钮"/> <!--<button>标签按钮--> <buttonclass="bubtnbtn">button标签按钮</button> <!--任意标签按钮--> <iclass="ibtnbtn">i标签按钮</i> <!--带背景图标按钮--> <ahref=""class="bgbtnbtn"> <span>带图标按钮</span> </a> <ahref=""class="bgbtn02btn"> <imgsrc=/skin/7ke/image/nopic.gif </a> </body> </html> 至于各种标签的优缺点 还是需要大家去体会啦 如果大家有什么好玩的按钮要写 我们一起实现哦。来源：爱蒂网
