清除模糊效果html,HTML5 CSS3模糊效果（毛玻璃）的按钮

CSS

语言：

CSSSCSS

确定

html,

body {

width: 100%;

height: 100%;

overflow: hidden;

margin: 0;

}

html #container,

body #container {

width: 100%;

height: 100%;

position: relative;

padding: 5% auto;

text-align: center;

background: url("/uploads/161001/normal1.jpg") no-repeat center;

background-size: cover;

}

html .btn,

body .btn {

width: 280px;

height: 56px;

display: inline-block;

position: relative;

top: 20%;

margin: 16px;

overflow: hidden;

background: transparent;

border: 2px solid white;

color: white;

font-size: 16px;

cursor: pointer;

-webkit-backface-visibility: hidden;

}

html .btn:focus,

body .btn:focus {

outline: none;

}

html .btn:before,

body .btn:before {

content: "";

height: 110%;

position: absolute;

top: -4px;

left: -4px;

right: -4px;

background: url("/uploads/161001/normal1.jpg") no-repeat;

background-size: cover;

background-attachment: fixed;

background-position: 50%;

}

html .btn span,

body .btn span {

position: absolute;

top: 50%;

right: 0;

left: 0;

transform: translateY(-50%);

z-index: 9;

}

html .btn#btn-1:before,

body .btn#btn-1:before {

transition: all 0.3s ease;

}

html .btn#btn-1:hover:before,

body .btn#btn-1:hover:before {

-webkit-filter: blur(4px);

filter: blur(4px);

}

html .btn#btn-2:before,

body .btn#btn-2:before {

transition: all 0.3s ease;

-webkit-filter: blur(4px);

filter: blur(4px);

}

html .btn#btn-2:hover:before,

body .btn#btn-2:hover:before {

-webkit-filter: blur(0);

filter: blur(0);

}