CSS美化按钮用JavaScript触发鼠标点击事件

最新推荐文章于 2023-04-27 14:49:27 发布

……god……

最新推荐文章于 2023-04-27 14:49:27 发布

阅读量369

点赞数 1

分类专栏：入门文章标签： html javascript css

本文链接：https://blog.csdn.net/DuHuangod/article/details/109126613

版权

入门专栏收录该内容

14 篇文章 2 订阅

订阅专栏

该博客展示了如何使用HTML、CSS和JavaScript实现一个动态交互的按钮。当鼠标长按时，按钮背景和阴影效果会发生变化，松开鼠标后恢复原样。此效果通过监听onmousedown和onmouseup事件完成。

摘要由CSDN通过智能技术生成

效果图如下：

原始按钮：

在这里插入图片描述

长按鼠标：

在这里插入图片描述

单击鼠标并松开：

在这里插入图片描述

源码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body{
	background:#55b9f3;
}
div{
	width:400px;
	height:400px;
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	right:0;
	margin:auto;
	border-radius: 50px;
	background:linear-gradient(145deg, #5bc6ff, #4da7db);
	box-shadow:20px 20px 60px #489dcf, 
             -20px -20px 60px #62d5ff;
}

</style>
</head>

<body>
<div id="box"></div>

<script>
	var box=document.getElementById("box");
	//单击鼠标事件
	/*box.οnclick=function(){
		box.style.background="#55b9f3";
		box.style.boxShadow="inset 20px 20px 60px #489dcf,inset -20px -20px 60px #62d5ff";
	}*/
	//鼠标长按事件
	box.onmousedown=function(){
		box.style.background="linear-gradient(145deg, #4da7db,#5bc6ff)";
		box.style.boxShadow="20px 20px 60px #489dcf,-20px -20px 60px #62d5ff";
	}
	//鼠标移出事件，按钮恢复原样
	box.onmouseup=function(){
		box.style.background="linear-gradient(145deg, #5bc6ff, #4da7db)";
		box.style.boxShadow="20px 20px 60px #489dcf, -20px -20px 60px #62d5ff";
	}
	
	
</script>
</body>
</html>