新拟物风格按钮 - 3D按下效果

            
            *,
*:after,
*:before {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(to bottom, #dee9da, #c6cfc7);
}

button {
    -webkit-tap-highlight-color: transparent;
    position: relative;
    border: 0;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #d0d7cd;
    box-shadow: inset 0 10px 20px 0 rgba(#333, 0.375), 0 2px 0 0 rgba(#fff, 0.25);
    transition: 0.5s ease;
    cursor: pointer;

    &:before {
        position: absolute;
        content: "";
        display: block;
        border-radius: 50%;
        width: 70%;
        height: 70%;
        top: 15%;
        left: 15%;
        background-image: linear-gradient(to bottom, #e7f2e1, #afb0aa);
        box-shadow: 0 15px 20px 0 rgba(#333, 0.375),
            inset 0 -3px 0 0 rgba(#333, 0.125);
        transition: 0.5s ease;
    }

    &:after {
        position: absolute;
        content: "";
        display: block;
        border-radius: 50%;
        width: 40%;
        height: 40%;
        top: 30%;
        left: 30%;
        background-image: linear-gradient(to bottom, #d6ded1, #e1ebdb);
        box-shadow: inset 0 -3px 0 0 rgba(#eee, 0.75), inset 0 3px 0 0 rgba(#333, 0.1);
    }

    span {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transition: 0.25s ease;
        z-index: 1;

        &:before,
        &:after {
            position: absolute;
            content: "";
            width: 8px;
            height: 32px;
            top: 50%;
            left: 50%;
            background-color: #B6B5B1;
            box-shadow: inset 2px -3px 4px 0 rgba(#333, 0.25);
            transform: translate(-50%, -50%);
            border-radius: 99em;
            transition: 0.25s ease;
        }
        
        &:before {
            left: -10px;
        }
        
        &:after {
            left: 10px;
        }
    }
    
    &:focus {
        outline: 0;
    }

    &[aria-checked="true"] {
        outline: 0;
        

        &:before {
            box-shadow: 0 5px 20px 0 rgba(#333, 0.25),
                inset 0 -3px 0 0 rgba(#333, 0.125);
        }

        span:before, span:after {
            background-color: #E05879;
            box-shadow: inset 2px -3px 4px 0 rgba(#333, 0.75);
            
        }
    }
}

        

            
            const toggleButtons = document.getElementsByClassName("toggle");

for (var i = 0; i < toggleButtons.length; i++) {
    toggleButtons[i].onclick = toggle;
}        
function toggle() { 
  if (this.getAttribute("aria-checked") == "true") {
      this.setAttribute("aria-checked", "false");
  } else {
      this.setAttribute("aria-checked", "true");
  }
};