点击按钮:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
font-family: inherit;
font-size: 15px;
}
button.learn-more {
font-weight: 600;
color: #382b22;
text-transform: uppercase;
padding: 1.25em 2em;
background: #fff0f0;
border: 2px solid #727bb1;
border-radius: 0.75em;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
}
button.learn-more::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #c6ccf9;
border-radius: inherit;
-webkit-box-shadow: 0 0 0 2px #727bb1, 0 0.625em 0 0 #ffe3e2;
box-shadow: 0 0 0 2px #727bb1, 0 0.625em 0 0 #ffe3e2;
-webkit-transform: translate3d(0, 0.75em, -1em);
transform: translate3d(0, 0.75em, -1em);
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}
button.learn-more:hover {
background: #ffe4ce;
-webkit-transform: translate(0, 0.25em);
transform: translate(0, 0.25em);
}
button.learn-more:hover::before {
-webkit-box-shadow: 0 0 0 2px #727bb1, 0 0.5em 0 0 #ffe3e2;
box-shadow: 0 0 0 2px #727bb1, 0 0.5em 0 0 #ffe3e2;
-webkit-transform: translate3d(0, 0.5em, -1em);
transform: translate3d(0, 0.5em, -1em);
}
button.learn-more:active {
background: #ffe4ce;
-webkit-transform: translate(0em, 0.75em);
transform: translate(0em, 0.75em);
}
button.learn-more:active::before {
-webkit-box-shadow: 0 0 0 2px #727bb1, 0 0 #d1cbff;
box-shadow: 0 0 0 2px #727bb1, 0 0 #d1cbff;
-webkit-transform: translate3d(0, 0, -1em);
transform: translate3d(0, 0, -1em);
}
</style>
</head>
<body>
<button class="learn-more">> w <;;;</button>
</body>
</html>
效果:
凹陷效果:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-color: #f0f0f0;
}
button {
color: #090909;
padding: 0.7em 1.7em;
font-size: 18px;
border-radius: 0.5em;
background: #e8e8e8;
border: 1px solid #e8e8e8;
transition: all .3s;
box-shadow: 6px 6px 12px #c5c5c5,
-6px -6px 12px #ffffff;
}
button:active {
color: #666;
box-shadow: inset 4px 4px 12px #c5c5c5,
inset -4px -4px 12px #ffffff;
}
</style>
</head>
<body>
<button>T____T</button>
</body>
</html>
效果:
开关按钮:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 开关:滑块周围的盒子 */
.switch {
font-size: 17px;
position: relative;
display: inline-block;
width: 3.5em;
height: 2em;
}
/* 隐藏默认的HTML复选框 */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* 滑块 */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #B0B0B0;
border: 1px solid #B0B0B0;
transition: .4s;
border-radius: 32px;
outline: none;
}
.slider:before {
position: absolute;
content: "";
height: 2rem;
width: 2rem;
border-radius: 50%;
outline: 2px solid #B0B0B0;
left: -1px;
bottom: -1px;
background-color: #fff;
transition: transform .25s ease-in-out 0s;
}
.slider-icon {
opacity: 0;
height: 12px;
width: 12px;
stroke-width: 8;
position: absolute;
z-index: 999;
stroke: #222222;
right: 60%;
top: 30%;
transition: right ease-in-out .3s, opacity ease-in-out .15s;
}
input:checked + .slider {
background-color: #222222;
}
input:checked + .slider .slider-icon {
opacity: 1;
right: 20%;
}
input:checked + .slider:before {
transform: translateX(1.5em);
outline-color: #181818;
}
</style>
</head>
<body>
<label class="switch">
<input type="checkbox">
<span class="slider">
<svg class="slider-icon" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation"><path fill="none" d="m4 16.5 8 8 16-16"></path></svg>
</span>
</label>
</body>
</html>
效果:
谢谢大家观看,T________T