立体按钮
- 核心代码
border: 1px solid #eeeeee;
border-radius: 50%;
background: linear-gradient(135deg,
rgba(230, 230, 230, 1) 0%,
rgba(246, 246, 246, 1) 100%);
box-shadow: -4px -4px 10px -5px rgba(255, 255, 255, 1),
4px 4px 10px -5px rgb(0, 0, 0, 0.3);
transform: translate(-50%,-50%);
- 全部代码
----css-----------
body{
background: #EEEEEE;
}
div {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border: 1px solid #eeeeee;
border-radius: 50%;
background: linear-gradient(135deg,
rgba(230, 230, 230, 1) 0%,
rgba(246, 246, 246, 1) 100%);
box-shadow: -4px -4px 10px -5px rgba(255, 255, 255, 1),
4px 4px 10px -5px rgb(0, 0, 0, 0.3);
transform: translate(-50%,-50%);
}
----------html------------
<body>
<div></div>
</body>
