点击按钮：
<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
