简洁的按钮面板交互效果-html代码-BFW代码库

简洁的按钮面板交互效果

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>
<head>
    <style>
@import url(https://fonts.googleapis.com/css?family=Lato:700);
        html, body {
            font-family: "Lato", sans-serif;
            background-color: #1E1E1E;
            text-align: center;
            height: 100%;
            overflow: hidden;
        }

        .container {
            text-align: center;
            position: absolute;
            margin-top: -80px;
            width: 100%;
            top: 50%;
        }

        .toggle {
            margin: 4px;
            display: inline-block;
        }

        .toggle {
            box-shadow: inset 0 0 35px 5px rgba(0, 0, 0, 0.25), inset 0 2px 1px 1px rgba(255, 255, 255, 0.9), inset 0 -2px 1px 0 rgba(0, 0, 0, 0.25);
            border-radius: 8px;
            background: #ccd0d4;
            position: relative;
            height: 140px;
            width: 140px;
        }
        .toggle:before {
            box-shadow: 0 0 17.5px 8.75px #fff;
            border-radius: 118.3px;
            background: #fff;
            position: absolute;
            margin-left: -50.4px;
            margin-top: -50.4px;
            opacity: 0.2;
            content: "";
            height: 100.8px;
            width: 100.8px;
            left: 50%;
            top: 50%;
        }
        .toggle .button {
            -webkit-filter: blur(1px);
            -moz-filter: blur(1px);
            filter: blur(1px);
            transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
            box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.5), inset 0 -3px 4px -1px rgba(0, 0, 0, 0.2), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 3px 4px -1px rgba(255, 255, 255, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.8), inset 0 20px 30px 0 rgba(255, 255, 255, 0.2);
            border-radius: 96.32px;
            position: absolute;
            background: #ccd0d4;
            margin-left: -48.16px;
            margin-top: -48.16px;
            display: block;
            height: 96.32px;
            width: 96.32px;
            left: 50%;
            top: 50%;
        }
        .toggle .label {
          .........完整代码请登录后点击上方下载按钮下载查看