html乳白色,CSS3 乳白色按钮悬停下压动效

CSS

语言：

CSSSCSS

确定

body {

background-color: #ececec;

}

.header {

position: fixed;

top: 0;

left: 0;

right: 0;

width: 100%;

height: 50px;

background-color: #ececec;

color: rgba(0, 0, 0, 0.6);

border-bottom: 1px rgba(0, 0, 0, 0.2) solid;

box-shadow: 0 2px white inset, #cbcbcb 1px 1px, #cecece 2px 2px, #d0d0d0 3px 3px, lightgray 4px 4px, #d5d5d5 5px 5px, #d8d8d8 6px 6px, #dadada 7px 7px, #ddd 8px 8px, #dfdfdf 9px 9px, #e2e2e2 10px 10px, #e4e4e4 11px 11px, #e7e7e7 12px 12px, #e9e9e9 13px 13px, #ececec 14px 14px;

}

.container {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

height: 100vh;

}

.btn {

font-family: arial;

font-size: 20px;

background-color: #ececec;

color: rgba(0, 0, 0, 0.6);

border: 1px rgba(0, 0, 0, 0.2) solid;

border-radius: 50px;

text-align: center;

padding: 10px 30px;

outline: none;

-webkit-transition: all 0.1s ease;

transition: all 0.1s ease;

box-shadow: 0 2px white inset, #cbcbcb 1px 1px, #cecece 2px 2px, #d0d0d0 3px 3px, lightgray 4px 4px, #d5d5d5 5px 5px, #d8d8d8 6px 6px, #dadada 7px 7px, #ddd 8px 8px, #dfdfdf 9px 9px, #e2e2e2 10px 10px, #e4e4e4 11px 11px, #e7e7e7 12px 12px, #e9e9e9 13px 13px, #ececec 14px 14px;

cursor: pointer;

}

.btn:hover {

background-color: #dcdcdc;

*zoom: 1;

filter: progid: DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFDCDCDC', endColorstr='#FFEAEAEA');

background-image: -webkit-linear-gradient(top, #dcdcdc 0%, #eaeaea 100%);

background-image: linear-gradient(to bottom, #dcdcdc 0%, #eaeaea 100%);

box-shadow: 0 -1px white inset, 0 1px rgba(0, 0, 0, 0.1) inset;

}