HTML点击盒子有阴影,当用户点击/触摸时，CSS盒子阴影效果

.ico-btn {

-webkit-user-select: none; margin-right: 0px;

-webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 2px 10px 0px, rgba(0, 0, 0, 0.0980392) 0px 0px 1px 0px, rgba(255, 255, 255, 0.247059) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.14902) 0px -1px 0px 0px inset;

-webkit-font-smoothing: antialiased;

border-bottom-left-radius: 25%;

border-bottom-right-radius: 25%;

border-top-left-radius: 25%;

border-top-right-radius: 25%;

box-shadow: rgba(0, 0, 0, 0.298039) 0px 2px 10px 0px, rgba(0, 0, 0, 0.0980392) 0px 0px 1px 0px, rgba(255, 255, 255, 0.247059) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.14902) 0px -1px 0px 0px inset;

cursor: pointer;

display: block;

font-family: Roboto, Arial, sans-serif;

font-size: 140px;

font-weight: normal;

height: 177px; /*167px;*/

line-height: 150px;

min-width: 0px;

padding: 40px 0 0 0; /*30*/

text-align: center;

white-space: nowrap;

width: 220px;/*200*/

z-index: 2;

margin: 0 auto;

color:#fff;

}

.ico-btn.red { background-color: rgb(219, 68, 55);

border-bottom-color:#ab2318;

border-bottom-left-radius: 25%;

border-bottom-right-radius: 25%;

border-bottom-style: solid;

border-bottom-width: 1px;

border-left-color: rgb(0, 0, 0);

border-left-style: none;

border-left-width: 0px;

border-right-color: rgb(0, 0, 0);

border-right-style: none;

border-right-width: 0px;

border-top-color:#ef675c;

border-top-left-radius: 25%;

border-top-right-radius: 25%;

border-top-style: solid;

border-top-width: 2px;

transition: all .1s linear;

}

.ico-btn.red:hover {

\t background-color: #D05944;

\t -webkit-transition: background-color .25s ease-in-out;

\t -moz-transition: background-color .25s ease-in-out;

\t -o-transition: background-color .25s ease-in-out;

\t transition: background-color .25s ease-in-out;

}