Js+Css做一个可弹起压下效果的按钮
好几天没写js和css了，昨天看一个大神的博客的时候无意中看到他的一个效果做的很不错，思来想去觉得自己做一个会比较好，毕竟，本来就是一个学习的过程！
效果：
我们今天做一个这样的按钮！
我首先说一下我的思路，我刚开时看到的时候在想，无非就是画一个背景阴影，然后利用js改变阴影的宽度，但是这样有一个问题就是上面的字体不会改变，我开始是做成了这样的：
这里很明显就看出来了是有问题的，上面的字体没有改变位置，说明我的思路是不对的，然后我在想，那么既然不改变阴影的宽度，只能是改变按钮本身的位置了，但是他在页面上怎么改变按钮的位置呢？给他一个相对固定的位置不就行了吗？于是就想到最外侧加一个div就可以了！
源码：
<!DOCTYPE html>
<!--
@author : clearlove
@Aim：CSDNTest
@Date ：2018-10
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
height: 40px;
width: 150px;
}
.submit {
width: 100px;
height: 36px;
background-color: #f0f3f9;
color: #333;
overflow: visible;
cursor: pointer;
box-shadow: 2px 2px #AFC4EA, 3px 3px #AFC4EA, 4px 4px #AFC4EA;
font-size: 14px;
padding-left: 0.5rem;
margin-left: 0px;
margin-top: 0px;
border-radius: 15px;
border-color: 2px solid #f0f3f9;
}
.submit_1 {
width: 100px;
height: 36px;
background-color: #f0f3f9;
color: #333;
overflow: visible;
cursor: pointer;
box-shadow: 1px 1px #AFC4EA, 2px 2px #AFC4EA, 3px 3px #AFC4EA;
font-size: 14px;
padding-left: 0.5rem;
margin-left: 1px;
margin-top: 1px;
border-radius: 15px;
border-color: 2px solid #f0f3f9;
}
</style>
</head>
<body>
<div>
<input type="button" name="" id="submit" class="submit" value="点击测试" οnmοusedοwn="mousedown()" οnmοuseup="mouseup()"/>
</div>
</body>
<script type="text/javascript">
var _submit = document.getElementById("submit");
function mousedown(){
document.getElementById("submit").className="submit_1";
}
function mouseup(){
document.getElementById("submit").className="submit";
}
</script>
</html>ok，这个基本就是比较合理的，这个其实主要用到的没有什么新技术，只是一些不是很常用的css，加阴影的关键字：
box-shadow这个关键字可以直接打扫W3Cschool里面看详解，这里就不班门弄斧了！
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-10-17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读