html纯文字文档,Htmlcss实现纯文字和带图标的按钮.docx

本文总结一下一些基础页面元素的实现方式，后续陆续更新。 首先我们遇到最多的可能

是按钮的切图， 按钮可能有很多种外观， 但是一般可分为纯文字的和带图标的按钮， 下面就来说说这两种按钮的实现方法。效果图如下：

代码如下 :

XML/HTML Code

1.

2.     

3.

     按钮写法     

       8.

 a:hover{text-decoration: none;}     

 .btn{     

   display: inline-block;     

   margin-top: 10px;     

   padding: 10px 24px;     

   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;     

 }     

 .bgbtn span{     

   margin-left: 10px;     

   padding-left: 20px;     

   background: url(images/edit.png) left center no-repeat;     

 }     

 .bgbtn02 img{     

   margin-bottom: -3px;     

   margin-right: 10px;     

&nbsp