css实现中性按钮效果代码-html代码-BFW代码库

css实现中性按钮效果代码

代码语言：html

代码描述：css实现中性按钮效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          display: grid;
          grid-auto-flow: column;
          grid-gap: 8vw;
          place-content: center;
          margin: 0;
          height: 100vh;
          background: #ecf0f4;
        }
        
        button {
          --i: var(--light, 0);
          --not-i: calc(1 - var(--i));
          --j: var(--press, 0);
          --not-j: calc(1 - var(--j));
          z-index: var(--i);
          border: none;
          width: 2em;
          height: 2em;
          border-radius: 15%;
          transform: scale(calc(1 - var(--j)*.02));
          box-shadow: calc(var(--not-j)*-0.25em) calc(var(--not-j)*-0.25em) 0.25em rgba(252, 252, 252, var(--not-j)), calc(var(--not-j)*0.25em) calc(var(--not-j)*0.25em) 0.25em rgba(210, 218, 230, var(--not-j)), inset calc(var(--j)*0.25em) calc(var(--j)*0.25em) 0.25em rgba(210, 218, 230, var(--j)), inset calc(var(--j)*-0.25em) calc(var(--j)*-0.25em) 0.25em rgba(252, 252, 252, var(--j));
     .........完整代码请登录后点击上方下载按钮下载查看