【HTML+CSS】教你切图篇1-实现按钮

    最近实习一直在做前端切图，也是一种需要绣花般耐心的活儿，在这里总结一下一些基础页面元素的实现方式，后续陆续更新。首先我们遇到最多的可能是按钮的切图，按钮可能有很多种外观，但是一般可分为纯文字的和带图标的按钮，下面就来说说这两种按钮的实现方法。效果图如下：

    代码如下：

</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