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; }
更新时间:2022-03-07 23:36:24