【web】

航沐忆

已于 2022-11-12 15:48:31 修改

阅读量108

点赞数

文章标签： html

于 2022-11-12 15:47:28 首次发布

本文链接：https://blog.csdn.net/qq_56724164/article/details/127821191

版权

第三次作业

制作按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			button {
				margin-left: 40px;
				margin-top: 40px;
				width: 120px;
				height: 70px;
				border: yellow dashed;
				border-radius: 15px;
				background-color: lightblue;
				font-family: monospace;
				font-size: 20px;
				font-weight: bold;
				font-style: italic;
				text-shadow: 2px 2px 2px orange,
					-2px -2px 2px orange;
				text-align: center;
				transition: 3s;
			}

			button:hover {
				background: url(https://c-ssl.duitang.com/uploads/item/202002/06/20200206220134_nvwyr.thumb.1000_0.jpeg);
				background-position: 50px 70px;
				text-decoration: underline;
				color: white;
				text-shadow: 2px 2px 2px crimson;
				border: solid purple;
				box-shadow: 4px 4px 4px plum,
					-4px -4px 4px plum;
			}
		</style>
	</head>
	<body>
		<div>
			<button>多样式按钮</button>
		</div>
	</body>
</html>