web前端自定义按钮

最新推荐文章于 2026-02-05 12:28:43 发布

原创最新推荐文章于 2026-02-05 12:28:43 发布 · 1.8k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

web前端

当前文章被收录于：

web前端

7 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

1、按钮边框

border: 粗细 虚实 颜色

border-radius: 圆角大小

2、字体

font-size: 字体大小

font-family: 字体样式

font-weight: 字体粗细

3、阴影效果

文字阴影

text-shadow: x轴阴影长度 y轴阴影长度 模糊度 颜色

边框阴影

box-shadow: 和 text-shadow 用法一致

4、具体效果

代码：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div{
		width: 120px;
		height: 80px;
		line-height: 80px;
		margin:200px auto;
	}
	input{
		width: 120px;
		height: 80px;
		border: 1px solid black;
		font-size: 40px;
		font-family: "宋体";
		font-weight: bold;
		border-radius: 40px;
	}
	input:hover{
		text-shadow: 2px 2px 2px red;
		box-shadow: 3px 0px 10px red,
		-3px 0px 10px blue,
		0px -5px 10px green,
		0px 5px 10px black;
	}
	</style>
</head>
<body>
	<div id="test">
		<input type="button" name="Button" value="按钮">
	</div>

</body>
</html>