CSS 3D按钮

最新推荐文章于 2025-03-21 21:11:27 发布

認真的雪

最新推荐文章于 2025-03-21 21:11:27 发布

阅读量726

点赞数

文章标签： css 3d css3

本文链接：https://blog.youkuaiyun.com/w_ang_y_i/article/details/121232922

版权

html 专栏收录该内容

5 篇文章

订阅专栏

在这里插入图片描述

<div class="btn">
	3D按钮
</div>

.btn {
	width: 150px;
	height: 50px;
	background-image: linear-gradient(to top, #D8D8D8 0%, #fff 80%, #FDFDFD 100%);
	border-radius: 30px;
	border: 1px solid #8F9092;
	box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8px #d6d7d9, 0 -4px 4px #cecfd1, 0 -6px 4px #fefefe, inset 0 0 3px 0 #cecfd1;
	transition: all 0.2s ease;
	font-family: "粗体", sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #606060;
	text-shadow: 0 1px #fff;
	text-align: center;
	line-height: 50px;
	cursor: pointer;
	user-select: none;
}

.btn:hover:not([disabled]) {
	box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8px #d6d7d9, 0 -4px 4px #cecfd1, 0 -6px 4px #fefefe, inset 0 0 3px 3px #cecfd1;
}

.btn:active:not([disabled]) {
	box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8px #d6d7d9, 0 -4px 4px #cecfd1, 0 -6px 4px #fefefe, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
	font-size: 13px;
}