HTML简单的按钮样式

最新推荐文章于 2025-06-04 19:12:01 发布

(ಥ_ಥ)禮

最新推荐文章于 2025-06-04 19:12:01 发布

阅读量501

点赞数

CC 4.0 BY-SA版权

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_51774330/article/details/127766564

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按钮样式设计</title>
		<style>
			#btn1{
				width: 100px;
				height: 50px;
				font-size: 30px;
				margin-left: 20px;
				margin-top: 20px;
				font-weight: bold;
				box-shadow: 2px 2px 10px red,
				-2px 2px 10px black,
				2px -2px 10px green,
				-2px -2px 10px blue;
				background-color: gold;
				color: #ffffff;
				border: 2px dashed darkcyan;
				border-radius: 0px;
			}
			#btn1:hover{
				background-color: black;
				color: greenyellow;
				border-radius: 100px;
			}
		</style>
	</head>
	<body>
		<button id="btn1">按钮</button>
	</body>
</html>