css实现立体巨大的按钮效果代码-html代码-BFW代码库

css实现立体巨大的按钮效果代码

代码语言：html

代码描述：css实现立体巨大的按钮效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url('https://fonts.googleapis.com/css2?family=Londrina+Solid&display=swap');
                
        * {
                box-sizing: border-box; 
                transform-style: preserve-3d;
        }
                
        body {
            margin: 0;
            padding: 0;
            background: linear-gradient(90deg, #101010, #444);
                height: 100vh;
                overflow: hidden;
        }
        
        .container {
                width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .button {
            width: 90vmin;
            height: 44vmin;
                perspective: 100vmin;
        }
        
        .base {
                background: linear-gradient(90deg, #888 10%, #999 80%, #fff 90%, #ccc 100%);
            width: 100%;
            height: 36vmin;
            bottom: 0;
            position: absolute;
            border-radius: 14vmin;
            border-bottom: 0.25vmin solid #303030;
            box-shadow: 2vmin 0 2vmin 0 #0008 inset, -0.25vmin 0.25vmin 0.5vmin 0.25vmin #000c, 0vmin 1vmin 1vmin 0 #fff4;
        }
        
        .base:before {
            content: "";
            width: 100%;
            height: 85%;
            background: linear-gradient(90deg, #999 10%, #ccc 80%, #fff 90%, #eee 100%);
            position: absolute;
            border-radius: 14vmin;
            top: 0vmin;
            z-index: -1;
                border: 0.25vmin solid #adadad;
            box-sizing: border-box;
        }
        
        .bt.........完整代码请登录后点击上方下载按钮下载查看