Js+Css做一个可弹起压下效果的按钮

最新推荐文章于 2022-03-03 10:25:13 发布

是悟能了

最新推荐文章于 2022-03-03 10:25:13 发布

阅读量4.3k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_41485414/article/details/83105379

版权

CSS 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

好几天没写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="点击测试" onmousedown="mousedown()" onmouseup="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，加阴影的关键字：