css立体按钮

下载代码

html

css

分享到微信朋友圈

html

css

* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
body {
	height:100vh;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	background-color:#96c8fb;
	background-image:linear-gradient(315deg,#96c8fb 0%,#ddbdfc 74%);
}
.noselect {
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-tap-highlight-color:transparent;
}
button {
	width:150px;
	height:50px;
	margin:5px;
	font-family:'Krona One',sans-serif;
	font-size:16px;
	color:rgba(255,255,255,0.9);
	text-shadow:1px 1px 2px rgba(0,0,0,0.5);
	cursor:pointer;
	border:none;
	border-radius:5px;
	transition:300ms;
}
.cyan {
	background:#4acff0;
	box-shadow:0px 5px #389cb5,0px 10px 10px rgba(0,0,0,0.25);
	z-index:-1;
}
.magenta {
	background:#f058f5;
	box-shadow:0px 5px #a23ca6,0px 10px 10px rgba(0,0,0,0.25);
}
.yellow {
	background:#f0e54a;
	box-shadow:0px 5px #aba232,0px 10px 10px rgba(0,0,0,0.25);
}
.black {
	background:#474747;
	box-shadow:0px 5px #292929,0px 10px 10px rgba(0,0,0,0.25);
}
button:hover {
	transform:translateY(5px);
	box-shadow:0px 0px transparent,0px 5px 10px rgba(0,0,0,0.25);
}
button:focus {
	outline:none;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg