按钮按下效果
2021-05-21 本文已影响0人
高阳刘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
margin: 15px auto;
width: 240px;
height: 240px;
transform: rotateX(40deg);
transform-style: preserve-3d;
}
/* Light gray bottom part */
.base {
background: #bbb;
border-radius: 16px;
box-shadow: 0 -6px 0px #777777 inset;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
position: relative;
transform-style: preserve-3d;
width: 240px;
height: 240px;
}
/* Clickable area containing both dark gray parts of button */
.btn-wrapper {
border: 0;
background: transparent;
cursor: pointer;
-webkit-appearance: none;
}
.btn-wrapper:active .btn {
transform: translateZ(1px);
}
.btn-wrapper:active .btn-side {
transform: translateZ(0);
}
.btn-wrapper:focus {
outline: none;
}
/* Top of button */
.btn {
background: #444 linear-gradient(#888888, transparent 50%);
border-radius: 16px;
box-shadow: 0 0 5px #888888 inset;
color: #f80;
display: block;
font: 178.5px Asap;
font-weight: bold;
width: 210px;
height: 210px;
transform: translateZ(36px);
transition: all 0.05s;
text-align: center;
text-shadow: 0 0 24px #f80, 0 -2.4px 0 #222222, 0 2.4px 0 #ffbb33;
z-index: 2;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
/* Shown side of button */
.btn-side {
background: #333333 linear-gradient(90deg, #666666, transparent 8%, transparent 92%, #666666);
border-radius: 0 0 12px 12px;
box-shadow: 0 -4.8px 4.8px #222 inset;
position: absolute;
bottom: 8%;
transform: rotateX(-60deg);
transform-origin: 0 100%;
transition: all 0.05s;
width: 210px;
height: 31.5px;
z-index: 1;
}
</style>
</head>
<body>
<div class='container'>
<div class='base'>
<div class='btn-wrapper' ontouchstart=''>
<div class='btn-side'></div>
<div class='btn'>
S
</div>
</div>
</div>
</div>
</body>
</html>
