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

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

代码如下：

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

 
       </  pre  >  <  pre     name  =  "code"     class  =  "html"  >  <!DOCTYPE html  >          
        <  html     lang  =  "zh-CN"  >         
        <  head  >         
          <  title  >  按钮写法  </  title  >         
          <  meta     charset  =  "UTF-8"  >         
          <  meta     http-equiv  =  "X-UA-Compatible"     content  =  "IE=Edge,chrome=1"  >         
          <  link     rel  =  "stylesheet"     href  =  "css/style.css"  >         
        <  style     type  =  "text/css"  >         
        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;       
        }       
        </  style  >         
        </  head  >         
        <  body  >         
        <!--<a>标签按钮-->         
        <  a     href  =  ""     class  =  "btn"  >  a标签按钮  </  a  >         
        <!--<input>标签按钮-->         
        <  input     class  =  "inbtn btn"     type  =  "button"     value  =  "input标签按钮"  />         
        <!--<button>标签按钮-->         
        <  button     class  =  "bubtn btn"  >  button标签按钮  </  button  >         
        <!--任意标签按钮-->         
        <  i     class  =  "ibtn btn"  >  i标签按钮  </  i  >         
        <!--带背景图标按钮-->         
        <  a     href  =  ""     class  =  "bgbtn btn"  >         
          <  span  >  带图标按钮  </  span  >         
        </  a  >         
        <  a     href  =  ""     class  =  "bgbtn02 btn"  >         
          <  img     src  =  "images/edit.png"  />  带图标按钮       
        </  a  >         
        </  body  >         
        </  html  >         
 


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


      
查看更多关于Html+css实现纯文字和带图标的按钮的详细内容...
        
          声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did37587

更新时间：2022-09-23 阅读：40次