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

时间：2021-05-08

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

代码如下：

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="images/edit.png"/>带图标按钮
  • </a>
  • </body>
  • </html>
    • 至于各种标签的优缺点，还是需要大家去体会啦，如果大家有什么好玩的按钮要写，我们一起实现哦。

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章