html 中的触碰效果,HTML5模拟真实按钮被触摸的交互动效

CSS

语言：

CSSSCSS

确定

body {

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;

min-height: 100vh;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

width: 100%;

height: 100%;

margin: 0;

background: #ffbf86;

margin: auto;

}

.button {

white-space: nowrap;

display: inline-block;

height: 40px;

line-height: 40px;

padding: 0 30px;

box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);

background: #fff;

border-radius: 4px;

font-size: 15px;

font-weight: 600;

text-transform: uppercase;

letter-spacing: .025em;

color: #555;

text-decoration: none;

-webkit-transition: all .15s ease;

transition: all .15s ease;

font-family: "Abel";

}

.button:hover {

color: #6e6e6e;

-webkit-transform: translateY(-1px);

transform: translateY(-1px);

box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);

}

.button:active {

color: #555;

background-color: #f6f9ff;

-webkit-transform: translateY(1px);

transform: translateY(1px);

box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);

}