教你用CSS3/JS绘制自己想要的按钮

作者: 倀空 | 来源:发表于2017-06-14 22:16 被阅读345次

    绘制按钮其实很简单,只不过对于还没自己动手绘制的“新人”来说,会有一点不知所措的感觉(其实我前天就是如此);
    为了方便大家的学习,我决定写篇基础教程来为web界做一点小小的共贡献

    我认为按钮的绘制分以下三个步骤

    • 第一步,绘制按钮的轮廓
    • 选择合适的html标签,设置轮廓的CSS
    /* html代码 */
    <a href="#" class="button off"></a>
    body{
        background-color: #E6C9B6;
    }
    
    /* CSS样式 */
    /* 按钮轮廓 */
    .button{
        display: block;
        margin:100px auto;
        position: relative;
        width:100px;
        height:40px;
        border-radius: 50px;
        border:1px solid #fff;
        background-color: #E9E4E0;
    }
    

    效果图


    仿IOS-1.jpg
    • 第二步,绘制按钮的默认状态
    • 这一步很重要,由于我们不会再给html文件添加其他的标签,所以我们需要用 :after 伪类对按钮进行CSS渲染
    /* 接在上面继续写 */
    .button:after{
            display: block;
            position: absolute; //相对按钮的轮廓进行决定定位
            top:2px;
            bottom: 2px;        //即设置top,又设置bottom使元素自动拉伸到最大
            left:2px;          //实际上,按钮的宽度即为容器的高度-(top+bottom)
            width:36px;        //按钮的宽度
            line-height: 36px;  //按钮文字的高度,如果不需要文字,可移除
            text-align: center;
            text-transform: uppercase;
            font-size: 16px;
            background-color: #fff;   //这里的背景颜色是按钮的背景颜色
            border:2px solid;
            transition: all 500ms;      //按钮的动画时长
    }
    

    实际上,做到这一步之后会发现,在浏览器上的效果没有一点变化,还是之前的那样子,不过不用着急,我们再加一点东西就很明显了

    • 在轮廓内添加小按钮
    .off:after {
            content: 'off';
            border-radius:30px;
            color: #999;
    }
    

    默认为off状态

    仿IOS-2.jpg

    - 再接着绘制要切换的状态

    .on:after {
              content: 'ON';
              border-radius:30px;
              transform: translate(56px, 0);   
              color:transparent;
              background-color:#4BD429;
            }
    
    仿IOS-3.jpg
    • 最后一步,写JS代码进行切换

    实际上,在CSS的切换之中,toggleClass是最为方便的。
    但是!!!
    这种切换方法不能切换你要触发的JS事件,
    毕竟,我们画按钮是为了完成某些功能,
    所以我采用的是这种方式,但也许并不是最好的

    var zn=0;
    $('.button').click(function(e){
        if(zn==1){
            $(this).removeClass("on").addClass("off");
            //此处可填要触发的事件
            zn=0;
        }else{
            $(this).removeClass("off").addClass("on");
             //此处可填要触发的事件
            zn=1;
        }
    });
    

    到此,一个完整的开关按钮就绘制完成了
    感谢你能花3~5分钟的时间阅览我不专业的教程

    PS:昨天要绘制一个按钮控制灯泡的开关(实际上就是切换背景图片),然后我四周一看,看到了墙壁上的一个公牛开关,既然是控制电灯的,我就想玩一玩仿真开关,忍着中午的睡意,还真勉强的给绘制出来了
      绘制过程并不复杂,我也就不细说了,贴下效果图和代码,感兴趣的可以自行看一下
    
    仿真开关.jpg
    仿真-2.jpg
    PS:我引用了一个初始化的CSS文件,可能需要
    box-sizing:border-box;
    
    <style type="text/css">
        /*开关的轮廓*/
        .button{
            display: block;
            position: relative;
            width:160px;
            height:180px;
            border-radius: 5px;
            background-color: #f1f1f1;
        }
        .button2{
            display: block;
            position: relative;
            width:160px;
            height:180px;
            border-radius: 5px;
            background-color: #f1f1f1;
        }
        /*指示灯*/
        .indicate{
            display: block;
            position: absolute;
            margin:60px 0 0 70px;
            width: 20px;
            height: 4px;
            border-radius: 2px;
            background-color: #A8C1C2;
            z-index: 1;
            transition: all 200ms;
        }
        .indicate_yes{
            margin:69px 0 0 70px;
            background-color: #A3D7E7;
        }
        /*开关内部的小按钮*/
        .button:after{
            display: block;
            position: absolute;
            top:40px;
            bottom: 40px;
            left:20px;
            right:20px;
            line-height: 52px;
            border:1px solid #FFF;
            transition: all 200ms;
        }
        .button2:after{
            display: block;
            position: absolute;
            top:49px;
            bottom: 31px;
            left:20px;
            right:20px;
            line-height: 52px;
            border:1px solid #FFF;
            transition: all 200ms;
        }
        /*默认状态的小按钮*/
        .on:after {
          content: '';
          border-radius: 5px;
          /* CSS3的颜色渐变凸显按钮的凸出感 */
          background: linear-gradient(#fff, #f2f2f2 80%,#fff);
          /* CSS3的影音的综合应用,绘制按钮的边缘,给予立体感 */
          box-shadow: 0 1px 0 0 #fff,
            0 3px 0.5px 0 #E7E9EA,
            0 5px 0.5px 0 #DEDFDF,
            0 6px 0.5px 0 #CCCCCD,
            0 7px 0.5px 0 #C5C7C7,
            0 8px 2px 0 #818283,
            0 9px 2px 0 #A7A8A8;
        }
        /*关闭后的小按钮*/
        .off:after {
          content: '';
          border-radius: 5px;
          background: linear-gradient(#fff, #f2f2f2 80%,#fff);
          box-shadow: 0 -1px 0 0 #fff,
            0 -3px 0.5px 0 #E7E9EA,
            0 -5px 0.5px 0 #DEDFDF,
            0 -6px 0.5px 0 #CCCCCD,
            0 -7px 0.5px 0 #C5C7C7,
            0 -8px 2px 0 #818283,
            0 -9px 2px 0 #A7A8A8;
        }
        </style> 
    
    /* JS代码 */
    <script type="text/javascript">
    $('.button').click(function(e) {
      var toggle = this;
      e.preventDefault();
      $(toggle).toggleClass('on')
             .toggleClass('off')
             .toggleClass("button2");
      //指示灯亮/灭
      $(this).children(".indicate")
        .toggleClass("indicate_yes");
    });
    
    //localStorage.clear();
    </script>
    

    END

    相关文章

      网友评论

      本文标题:教你用CSS3/JS绘制自己想要的按钮

      本文链接:https://www.haomeiwen.com/subject/rjmeqxtx.html