CSS实现立体按钮

立体按钮

• 核心代码

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------------