移动端按钮交互变色实

web开发过程中，移动端按钮交互效果，点击按钮变色

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript">
        document.body.addEventListener('touchstart', function () {});
    </script>
    <style>
    .btn{
        font-size: 1.5em;
        line-height: 2em;
        text-align: center;
        color: #fff;
        background: #ce4f54;
        width: 200px;
    }
    .btn:hover,
    .btn:active,
    .btn:focus{
        background: #043d5d;
    }
    </style>
    <title>无标题文档</title>
</head>

<body>
    <div class="btn">测试Test</div>
</body>

</html>

　　如果不绑定事件，在pc和安卓上可以实现

　　绑定事件为了在ios中生效;

使用css3属性实现缓交互

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style>
    .btn{
        font-size: 1.5em;
        line-height: 2em;
        text-align: center;
        color: #fff;
        background: #ce4f54;
        width: 200px;
        transition: 0.5s all;
        -webkit-transition: 0.5s all;
        -o-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -ms-transition: 0.5s all;
    }
    .btn:hover,
    .btn:active{
        background: #043d5d;
    }
    </style>
    <title>无标题文档</title>
</head>

<body>
    <div class="btn">测试Test</div>
</body>

</html>

　　3、通过js操作class

这个已经很多人写了，就不用写例子了