再慢慢熟悉,还不知道怎么上传视频,给个效果图:
直接上代码
如有需要代码参考如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>移动端button按压效果</title>
<script type="text/javascript">
document.body.addEventListener('touchstart', function () {});//移动端情况下active不生效解决
</script>
<style>
.button{display:inline-block;font-size:16px;cursor:pointer;text-align:center;text-decoration:none;outline:0;color:#fff;background-color:#4CAF50;padding: 10px;border:none;border-radius:15px;box-shadow:0 3px #999}
.button:hover{background-color:#3e8e41}
.button:active{background-color:#3e8e41;box-shadow:0 5px #666;transform:translateY(4px)}
</style>
</head>
<body>
<h4>"按压效果"</h4>
<button class="button">Click Me</button>
</body>
</html>