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;
        }
        
        .btn {
        	width: 90%;
            height: 32vmin;
            background: linear-gradient(86deg, #564672 10%, #7b64a3 60%, #b696ed 88%, #9e78df 100%);
            border-radius: 12vmin;
            left: 5%;
            position: absolute;
            bottom: 10vmin;
            box-shadow: 2vmin 0 2vmin 0 #0008 inset;
            border-bottom: 0.25vmin solid #0008;
        }
        
        .btn:before {
            content: "";
            width: 100%;
            height: 25vmin;
            background: linear-gradient(84deg, #7c65a5 10%, #9c7fcf 60%, #d1b6ff 87%, #ba92ff 100%);
            position: absolute;
            border-radius: 14vmin;
            top: -2vmin;
            z-index: -1;
            border: 0.15vmin solid #3333338a;
            box-sizing: border-box;
            border-bottom-width: 0.25vmin;
        }
        
    .........完整代码请登录后点击上方下载按钮下载查看