使用box-shadow属性来实现复古按钮的样式
具体代码如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><style>.button {outline: none;width: 245px;height: 85px;font-size: 40px;color: #fff;background: #dcc551;border-radius: 25px;cursor: pointer;text-align: center;box-shadow: inset -5px 0px 3px #a9973e,inset 5px 0px 3px #a9973e,inset 0px 5px 3px #eee3ac,inset 0px -5px 3px #6e6228;}</style><body><button class="button"></button></body></html>
实现的效果:
这里有明显的1px的边框但为了实现点击的效果不能给去掉。
还需要大牛来指点一下。