css3的按钮效果，学习来的

郭胜_自强

于 2018-03-01 11:45:49 发布

阅读量451

点赞数

CC 4.0 BY-SA版权

分类专栏： html5

本文链接：https://blog.youkuaiyun.com/GS2016/article/details/79410425

html5 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用CSS3创建独特按钮效果的方法。通过精心设置的阴影、圆角及字体样式，实现了一个具有立体感的按钮，并展示了鼠标悬停状态下的动画变化。此示例适用于前端开发者学习CSS3特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css3的按钮效果</title>
		<style type="text/css">
			*{margin:0;padding:0;}
			#box{
				width:400px;height:200px;
				background-color:#ccf;
				margin:100px auto;
				border-radius:50%;
				box-shadow: 0 -15px 15px #88f inset,
							10px -15px 15px #44f inset,
							-10px -15px 15px #fff inset,
							0 15px #88f,
							-35px 40px 5px rgba(0,0,0,0.3);
				font:40px "微软雅黑";
				text-align:center;
				line-height:150px;
				letter-spacing: 5px;
				font-weight: bold;
				color:#88f;
							}
			.content{
				text-shadow: 3px -3px 1px #44f,-3px 3px 1px #fff;
				transform: scale(1,0.5);
			}		
			#box:hover{
				box-shadow:
				0 -15px 15px #88f inset,
				10px -15px 15px #44f inset,
				-10px -15px 15px #fff inset,
				0 2px #88f,
				-8px 15px 5px rgba(0,0,0,0.3);
				margin-top:115px;
			}
			.other{
				text-align: center;
				line-height:50px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="content">艾尚编程</div>
		</div>
		<div class="other">艾尚编程工作室：学习的demo</div>
	</body>
</html>