简单的CSS外阴影按钮

最新推荐文章于 2025-01-17 23:19:46 发布

绝对零度试验机

最新推荐文章于 2025-01-17 23:19:46 发布

阅读量853

点赞数

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/svowwc/article/details/42277141

版权

CSS 专栏收录该内容

2 篇文章

订阅专栏

简单的CSS外阴影按钮

新手制造

按前：

[1]

按后：

[2]

代码：

<html>
	<head>
		<meta charset="utf-8"/>
		<title>CSS3.0 外阴影按钮</title>
		<style type="text/css">
			body{
				margin-top:50px;
				margin-left:50px;
			}
			#button{
				text-align:center;
				width:80px;
				height:30px;
				border:1px solid #000;
				box-shadow:2px 2px 2px 2px;
				cursor:Pointer;
			}
		</style>
	</head>
	<body>
		<div id="button" οnmοusedοwn="DOWN()" οnmοuseup="UP()" οnmοuseleave="UP()">我是按钮</div>
	</body>
	<script>
		function $(id){
			return document.getElementById(id);
		}
		function DOWN(){
			$("button").style.marginTop="2px";
			$("button").style.marginLeft="2px";
			$("button").style.boxShadow="1px 1px 2px 2px";
		}
		function UP(){
			$("button").style.marginTop="0px";
			$("button").style.marginLeft="0px";
			$("button").style.boxShadow="2px 2px 2px 2px";
		}
	</script>
</html>