• 技术文章 > web前端 > css教程

    如何使用CSS制作按钮

    不言 不言 2018-12-06 14:12:10 原创 551
    今天的这篇文章中将给大家介绍四种按钮的实现方法,其中包括普通的方形按钮,圆角按钮,立体按钮和带有简单动画的按钮,下面我们来看具体的内容。

    按钮

    我们先来看一下普通方形按钮的实现方法

    按钮代码如下所示

    HTML代码

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title></title>
    </head>
    <body>
    <button>普通方形按钮</button>
    </body>
    </html>

    圆角按钮的实现方法

    代码如下

    HTML代码

    <button class="kadomaru">圆角按钮</button>

    CSS代码

    .kadomaru {
      width:100px;
      font-size:12px;
      color:#FFFFFF;
      text-align:center;
      display:block;
      padding:10px 0 10px;
      background:#6BCBF6;
      border-radius: 20px;
    }

    立体按钮的实现方法

    代码如下

    HTML代码

    <button class="shadow">立体按钮</button>

    CSS代码

    .shadow {
      width:100px;
      font-size:12px;
      color:#FFFFFF;
      text-align:center;
      display:block;
      padding:10px 0 10px;
      background:#6BCBF6;
      border-radius:5px;
      box-shadow:1px 1px #1A6EA0;
    }

    使用box-shadow指定阴影大小和阴影颜色,营造立体的感觉。

    上述三种方法实现的按钮效果如下

    按钮

    最后一个是带有简单动画的按钮实现,我们来看具体的示例

    代码如下

    HTML代码

    <div class="animation">
      <div class="effect"></div>
      <a href="#"> Touch me </a>

    CSS代码

    .animation {
      width:100px;
      height:50px;
      text-align:center;
      border:2px solid #BBBBBB;
      float:left;
      cursor:pointer;
      position:relative;
      box-sizing:border-box;
      overflow:hidden;
      margin:0 0 40px 0;
    }
    .animation a {
      font-family:arial;
      font-size:12px;
      color:#BBBBBB;
      text-decoration:none;
      line-height:50px;
      transition:all .10s ease;
      z-index:2;
      position:relative;
    }
    .effect {
      width:140px;
      height:50px;
      top:-2px;
      left:-140px;
      background:#BBBBBB;
      position:absolute;
      transition:all .5s ease;
      z-index:1;
    }
    .animation:hover .effect {
      left:0;
    }
    .animation:hover a {
      color:#FFFFFF;
    }

    介绍定制的一个例子的话,将.effect的left属性变成right属性,并将.animation:hover .effect的left属性变更为right属性,可以变成向右的动画。

    当执行上述代码时浏览器上显示如下效果:

    2345截图20181206135425.png

    将鼠标放在按钮上则会有一个向右的动画,显示效果如下

    按钮

    本篇文章到这里就已经全部结束了,有关CSS中按钮的制作方法大家可以移步到CSS视频教程或者CSS3视频教程栏目进一步学习!!!

    以上就是如何使用CSS制作按钮的详细内容,更多请关注php中文网其它相关文章!

    第五期线上培训班
    专题推荐: 按钮
    上一篇:CSS的flexbox如何使用 下一篇:CSS3如何实现自动换行效果

    相关文章推荐

    • jQuery实现点击按钮文字变成input框点击保存变成文字_jquery • Bootstrap按钮下拉菜单组件详解_javascript技巧 • CSS小例子(只显示下划线的文本框,像文字一样的按钮)_经验交流 • css样式之区分input是按钮还是文本框的方法_经验交流 • css不用图片美化按钮_经验交流 • 用滑动门技术设计按钮的图文教程_经验交流

    全部评论我要评论

  • 取消 发布评论 发送
  • PHP中文网