手绘风格按钮

            
            /* 定义按钮的基本样式 */
button {
    --clr: #FFE4E1; /* 默认背景色 */
    --fg: #000; /* 文字颜色 */
    border: none; /* 移除边框 */
    cursor: pointer; /* 鼠标悬停时显示指针 */
    color: var(--fg); /* 使用变量设置文字颜色 */
    background: transparent; /* 背景透明 */
    padding: .7em 1.2em; /* 内边距 */
    font-size: 1.4rem; /* 字体大小 */
    font-weight: 700; /* 字体粗细 */
    font-family: inherit; /* 继承字体 */
    width: max-content; /* 宽度适应内容 */
    position: relative; /* 相对定位 */
    text-align: center; /* 文本居中 */

    /* 定义按钮伪元素:before的样式 */
    &:before {
        --clrs1: color-mix(in lab, var(--clr), #0000 50%); /* 定义渐变色 */
        --clrs2: color-mix(in lab, var(--clr), #0000 20%);
        --clrs3: color-mix(in lab, var(--clr), #0000 60%);
        --clrs4: color-mix(in lab, var(--clr), #0000 98%);
        position: absolute; /* 绝对定位 */
        content: ''; /* 伪元素内容为空 */
        inset: 0; /* 四边填充 */
        padding: .1em; /* 内边距 */
        border: 4px double var(--clr); /* 双线边框 */
        border-radius: .1em .2em / .5em .23em; /* 圆角 */
        z-index: -1; /* 层级低于按钮文本 */
        transition: .25s ease; /* 过渡效果 */
        background: //var(--fg)
            linear-gradient(178deg,
                var(--clrs1),
                var(--clrs2) 20% 70%,
                var(--clrs3) 90%,
                var(--clrs4)) 0 0 / 100% .3rem; /* 渐变背景 */
        background-clip: content-box; /* 背景裁剪到内容区域 */
    }

    /* 按钮激活状态下的样式 */
    &:active {
        translate: .05em .1em; /* 平移效果 */
        filter: drop-shadow(-.1em -.1em .1em color-mix(in srgb, var(--clr), transparent 50%)); /* 阴影效果 */
    }

    /* 激活状态下伪元素:before的样式 */
    &:active:before {
        filter: url("#squiggly-0"); /* 应用SVG滤镜 */
    }

    /* 按钮获得焦点时的样式 */
    &:focus {
        outline: 2px dashed color-mix(in srgb, var(--clr), transparent 90%); /* 虚线轮廓 */
        outline-offset: .5rem; /* 轮廓偏移量 */
        border-radius: .25em; /* 圆角 */
    }

    /* 默认阴影效果 */
    filter: drop-shadow(.1em .1em .1em color-mix(in srgb, var(--clr), transparent 50%));
}

/* 定义不同按钮的特殊样式 */
.but1:before {
    filter: url("#squiggly-0"); /* 应用特定SVG滤镜 */
}
.but1:active:before {
    filter: url("#squiggly-5"); /* 激活时应用不同的SVG滤镜 */
}
.but2 {
    --clr: #98FB98; /* 修改默认背景色 */
    &::before {
        filter: url("#squiggly-1"); /* 应用特定SVG滤镜 */
    }
}
.but3 {
    --clr: #87CEEB; /* 修改默认背景色 */
    &:before {
        filter: url("#squiggly-2"); /* 应用特定SVG滤镜 */
    }
}
.but4 {
    --clr: #DDA0DD; /* 修改默认背景色 */
    &:before {
        filter: url("#squiggly-3"); /* 应用特定SVG滤镜 */
    }
}
.but5 {
    --clr: #F0E68C; /* 修改默认背景色 */
    &:before {
        filter: url("#squiggly-4"); /* 应用特定SVG滤镜 */
    }
}
.but6 {
    --clr: #FFA07A; /* 修改默认背景色 */
    &:before {
        filter: url("#squiggly-5"); /* 应用特定SVG滤镜 */
    }
}

/* 标题样式 */
h1 {
    font-family: "Edu NSW ACT Foundation", cursive; /* 字体 */
    color: #F5F5F5; /* 颜色 */
    grid-column: 1 / -1; /* 占据所有列 */
    margin: 0; /* 去除默认边距 */
    font-weight: 500; /* 字体粗细 */
    font-size: 2.7rem; /* 字体大小 */
}

/* SVG滤镜容器隐藏 */
.squigglysvg {
    display: hidden; /* 隐藏 */
    position: absolute; /* 绝对定位 */
    width: 0; /* 宽度为0 */
    height: 0; /* 高度为0 */
}

/* 页面主体样式 */
body {
    font-family: "Merienda", cursive; /* 字体 */
    min-height: 100vh; /* 最小高度为视窗高度 */
    margin: 0; /* 去除默认边距 */
    display: grid; /* 使用网格布局 */
    grid-template-columns: 1fr 1fr; /* 定义两列等宽 */
    place-content: center; /* 内容居中 */
    place-items: center; /* 项目居中 */
    gap: 2em; /* 列间距 */
    background-color: #2F4F4F; /* 背景色 */
    background-image: radial-gradient(#535150, #1f2020); /* 背景渐变 */
}

/* 第一个按钮对齐方式 */
button:nth-of-type(2n-1) {
    justify-self: right; /* 靠右对齐 */
}

/* 第二个按钮对齐方式 */
button:nth-of-type(2n) {
    justify-self: left; /* 靠左对齐 */
}