CSS+HTML

效果图：

svg.gif

此处是本人参考下面的地址大致实现的效果，主要是加以注释，并教大家了解实现这种效果的知识点。(有兴趣的可以参考地址深入学习)

参考地址：http://www.jq22.com/code2950

知识点1：

/* 通过设置
            模糊度，filter
            背景颜色，background-color
            背景渐变色，background
            阴影，box-shadow
            实现按键效果图 */
            filter: blur(0.025em);
            background-color: #bcc6d8;
            background: radial-gradient(160% 160% at 57.5% 60%, rgba(235, 238, 243, 0) 30%, #ebeef3 45%), radial-gradient(180% 200% at 40% 17.5%, rgba(152, 168, 194, 0) 35%, #98a8c2 50%), radial-gradient(120% 120% at 45% 45%, rgba(184, 195, 213, 0) 42%, rgba(152, 168, 194, 0.75) 50%);
            box-shadow:
                inset -0.05em -0.05em 0.025em -0.025em #a8b5cc,
                0.115em 0.15em 0.1em -0.033em #98a9c2,
                0.15em 0.2em 0.25em #a8b5cc,
                0.5em 0.33em 0.5em 0.1em #a8b5cc,
                -0.1em -0.1em 0.05em -0.075em #dee3ec,
                -0.2em -0.2em 0.33em -0.075em #dadfe9

知识点2：
transition 过渡效果

 transition: opacity 0.25s cubic-bezier(0.33, 0.45, 0.3, 1) 0.35s, stroke-dashoffset 4.2s cubic-bezier(0.33, 0.45, 0.3, 1) 0.35s, stroke 1.2s cubic-bezier(0.33, 0.45, 0.3, 1) 4.65s, color 1.2s cubic-bezier(0.33, 0.45, 0.3, 1) 4.65s;

image.png

知识点3：
SVG Stroke 属性
参考地址：https://www.runoob.com/svg/svg-stroke.html
指纹路径的实现

 animation: printIn 2s cubic-bezier(0.33, 0.45, 0.3, 1) forwards 3.2s;

/* 底部路径显示动画 */
        @keyframes printIn {
            from {
                opacity: 0;
                stroke-dashoffset: .5;
            }

            to {
                opacity: 1;
                stroke-dashoffset: 0;
            }
        }

svg1.gif

不太了解 stroke-dashoffset 动画实现的，可参考https://segmentfault.com/a/1190000007309718，此处只是简单的使用，并没有很深入的研究(不过我以前有研究过 )

此处 path 路径的绘制也是个难点，不过人家有现成的，就直接拿来用，更何况你不是UI~~~

没错，只要给 button 设置 知识点1 这几个属性就变成了这样

image.png

再加上一个 button ::after,设置属性，就变成了这样(3D液态的效果就出来了，通过:hover控制 button ::after的显示，也就实现了按钮的效果)

image.png

代码如下：