Html
    Css
    Js

    
                        
body {
	background-color:#efeeee;
}
.container {
	width:100%;
	height:200px;
	display:flex;
	justify-content:space-around;
	flex-wrap:wrap;
}
.box {
	height:40px;
	width:100px;
}
.text {
	width:100%;
	height:40px;
	display:flex;
	border-radius:4px;
	font-size:18px;
	align-items:center;
	cursor:pointer;
	justify-content:center;
	transition:.3s ease-out;
}
.send {
	box-shadow:18px 18px 30px rgba(0,0,0,.1),-18px -18px 30px rgba(255,255,255,1);
}
.cancel {
	box-shadow:18px 18px 30px rgba(231,44,11,.1),-18px -18px 30px rgb(255,255,255,1);
	color:rgb(231,44,11);
}
.test {
	box-shadow:18px 18px 30px rgba(13,236,5,0.1),-18px -18px 30px rgba(255,255,255,1);
	color:rgb(13,236,5);
}
.text>span {
	transition:.3s;
}
.send:hover {
	box-shadow:0px 0px 0px rgba(0,0,0,.1),0px 0px 0px rgba(255,255,255,1),inset 18px 18px 30px rgba(0,0,0,.1),inset -18px -18px 30px rgba(255,255,255,1);
}
.test:hover {
	box-shadow:0px 0px 0px rgba(13,236,5,.1),0px 0px 0px rgba(255,255,255,1),inset 18px 18px 30px rgba(13,236,5,.1),inset -18px -18px 30px rgba(255,255,255,1);
}
.cancel:hover {
	box-shadow:0px 0px 0px rgba(231,44,11,.1),0px 0px 0px rgba(255,255,255,1),inset 18px 18px 30px rgba(231,44,11,.1),inset -18px -18px 30px rgba(255,255,255,1);
}
.text:hover span {
	font-size:16px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css实现拟态按钮

更新时间:2022-03-07 23:36:24

0