css实现中性按钮点击凹凸效果代码-html代码-BFW代码库

css实现中性按钮点击凹凸效果代码

代码语言：html

代码描述：css实现中性按钮点击凹凸效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<!-- partial:index.partial.html -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Varela+Round&display=swap">
<style>
    :root{
        --on: -4px -3px 6px #ffffff17, 4px 5px 8px #1d1d1d8a;
        --off: -5px -5px 8px #c28be21f inset, 5px 5px 8px #1b20279a inset;
    }
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        background-color: #202e3d;
    }
    .container{
        display: flex;
        justify-content: center;
        height: 100vh;
        align-items: center;
        gap: 50px;
    }
    .btn{
        width:  100px;
        height: 100px;
        background-color: #202e3d;
        border-radius: 20px;
        cursor: pointer;
        font-family: "Ostrich sans", "Varela Round";
        transition: all 1s;
        text-align: center;
    }
    .on{
        box-shadow: var(--on);
        color: white;
        font-size: 2rem;
    }
    .off{
       .........完整代码请登录后点击上方下载按钮下载查看