HTML+CSS怎样编辑带文字和图标的按钮 代码是什么

本篇内容介绍了“HTML+CSS怎样写带文字和图标的按钮，代码是什么”的有关知识，在实际项目的操作过程或是学习过程中，不少人都会遇到这样的问题，接下来就让小编带大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

代码如下：

XML/HTML Code 复制内容到剪贴板pre>pre name="code" class="html">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 href="" class="btn">a标签按钮a>    

input class="inbtn btn" type="button" value="input标签按钮"/>    

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怎样写带文字和图标的按钮，代码是什么”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章！

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!