css3的按钮效果,学习来的

本文介绍了一种使用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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值