Loading

CSS3按钮效果制作

CSS3按钮效果制作

首先附上效果图，按下去有一种下沉的效果，

未按效果

按下去效果

原理：第一个按钮相对比较简单，就直接是一个双重阴影效果，然后鼠标按下去让他的margin-top值为-3px，阴影效果减小一点，就会有一种下沉的效果

　　　第二个按钮，相比第一个按钮，多了一个伪类，就是按钮上的一个小圆点，当按钮按下去时，小圆点的内阴影和外阴影的颜色调换一下，外阴影增加一个2px下部阴影，其他的和第一个按钮一样。

<style>
    /*初始化样式*/
    *{margin: 0;padding: 0;}
    .box{padding: 10px;box-sizing: border-box;overflow: hidden;width: 800px;overflow: hidden;margin: auto;height: 50px;}
    a{color: #000;font-size: 14px;font-family: 'Open Sans', sans-serif;text-decoration: none;display: inline-block}
    /*按钮一*/
    .btn1{padding:0 10px 0 10px;
        line-height: 30px;
        background:orange;
        border-radius: 5px;
        box-shadow: 0 5px 0 gray,1px 6px 6px gray;
    }
    .btn1:active{margin-top: 3px;
        box-shadow: 0 2px 0 gray,1px 3px 3px gray;
    }
    
    /*按钮二*/
    .btn2{padding:0 10px 0 10px;
        line-height: 30px;
        background:orange;
        border-radius: 5px;
        box-shadow: 0 5px 0 gray,1px 6px 6px gray;
        position: relative;
    }
    .btn2:after{
        content: '';
        position: absolute;
        height: 17px;
        width: 17px;
        border-radius: 50%;
        top: 50%;
        margin-top: -8.5px;
        right: 5px;
        box-shadow:  inset 0px 1px 0px gray, 0px 1px 0px #fff;
        background: #ffc100;
    }
    .btn2:active::after{
        box-shadow: inset 0px 1px 0px #fff, 0px 1px 0px gray,-1px 3px 0 gray;
    }
    .btn2:active{
        margin-top: 3px;
        box-shadow: 0 2px 0 gray,1px 3px 3px gray;
    }
</style>
<body>
    <!--按钮一-->
    <div class="box">
        <a class="btn1" href="#">Click me!</a>
    </div>
    <!--按钮二-->
    <div class="box">
        <a href="#" class="btn2">Click me!&nbsp;&nbsp;&nbsp;&nbsp;</a>
    </div>
</body>

 

posted @ 2017-03-23 14:17  冯叶青  阅读(1414)  评论(0)  编辑  收藏  举报