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

Shun

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

代码如下：

</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] Html+css实现纯文字和带图标的按钮

相关帖子

CSS3荧光灯文字闪烁动画特效

利用html+js触发弹窗事件

利用HTML、CSS和JS制作随机密码生成器

css如何调整字体颜色

javascript如何改变背景

使用原生querySelectorAll和forEach来实现点击切换

免插件、DZ内置JS轻松实现外链访问二次确认对话提示框

react如何引入css

Shun LV3