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

好几天没写js和css了,昨天看一个大神的博客的时候无意中看到他的一个效果做的很不错,思来想去觉得自己做一个会比较好,毕竟,本来就是一个学习的过程!

效果:

Js+Css做一个可弹起压下效果的按钮_第1张图片

 我们今天做一个这样的按钮!

我首先说一下我的思路,我刚开时看到的时候在想,无非就是画一个背景阴影,然后利用js改变阴影的宽度,但是这样有一个问题就是上面的字体不会改变,我开始是做成了这样的:

Js+Css做一个可弹起压下效果的按钮_第2张图片

这里很明显就看出来了是有问题的,上面的字体没有改变位置,说明我的思路是不对的,然后我在想,那么既然不改变阴影的宽度,只能是改变按钮本身的位置了,但是他在页面上怎么改变按钮的位置呢?给他一个相对固定的位置不就行了吗?于是就想到最外侧加一个div就可以了!

源码:




	
		
		
		
	
	
		

ok,这个基本就是比较合理的,这个其实主要用到的没有什么新技术,只是一些不是很常用的css,加阴影的关键字:

box-shadow

 这个关键字可以直接打扫W3Cschool里面看详解,这里就不班门弄斧了!

喜欢我的文章的可以关注一下,我会持续更新前后端的一些技术的!

谢谢阅读!

你可能感兴趣的:(javascript)