css 玻璃按钮

Posted 2021-05-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 玻璃按钮相关的知识，希望对你有一定的参考价值。

.glass{
  .box-sizing;
  border: 0 none;
  position: relative;
  text-decoration: none;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 0px 0 0 rgba(255,255,255,0.5), inset 0 -1px 0 0 rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 0px 0 0 rgba(255,255,255,0.5), inset 0 -1px 0 0 rgba(0,0,0,0.5);
  box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 0px 0 0 rgba(255,255,255,0.5), inset 0 -1px 0 0 rgba(0,0,0,0.5);
  // text-shadow: 0 1px rgba(255,255,255,0.6);
  // margin: 6px 0;
  &:active {
    // background: #ccc;
    -moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
    box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
  }
  a:active{
    // padding: 4% 12%;
  }
}

以上是关于css 玻璃按钮的主要内容，如果未能解决你的问题，请参考以下文章

CSS技巧收集——毛玻璃效果（深入理解滤镜filter）