css立体悬浮按钮效果代码-html代码-BFW代码库

css立体悬浮按钮效果代码

代码语言：html

代码描述：css立体悬浮按钮效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">

      
    <style>
        /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
             @media (max-width: 750px) and (min-width: 400px) {
                 html {
                     font-size: 2vw;
                 }
             }

             @media (max-width: 400px) {
                 html {
                     font-size: 4vw;
                 }
             }

             body {
                 display: grid;
                 place-items: center;
                 grid: repeat(4, 1fr)/repeat(2, 1fr);
                 grid-auto-flow: column;
                 grid-gap: .25rem;
                 margin: 0;
                 min-height: 100vh;
                 background: radial-gradient(#717171, #373737) 50% 0/100% 100vh fixed;
                 text-align: center;
             }

             @media (min-width: 1550px) and (min-aspect-ratio: 2 / 1) {
                 body {
                     grid: repeat(2, 1fr)/repeat(4, 1fr);
                     grid-auto-flow: row;
                 }
             }

             @media (max-width: 400px) {
                 body {
                     display: flex;
                     flex-direction: column;
                     justify-content: space-around;
                     min-width: 135px;
                 }
             }

             button {
                 overflow: hidden;
                 margin: 1em auto;
                 border: none;
                 padding: 0;
                 width: 10em;
                 height: 2.5em;
                 border-radius: 0.3125em;
                 --dy: 0px;
                 transform: translatey(var(--dy));
                 --in-sh: inset 0 -0.15625em 1px rgba(0, 0, 0, 0.25);
                 box-shadow: var(--in-sh), 0 calc(0.3125em - var(--dy)) 1.875em calc(.5*var(--dy) - 0.9375em) #000, 0 calc(0.625em - var(--dy)) 1.25em calc(.5*var(--dy) - 0.9375em) #000, 0 calc(0.9375em - var(--dy)) 1.25em calc(.5*var(--dy) - 0.9375em) #000;
                 background: Linear-gradient(var(--slist));
                 font: 2em/ 2.5em abel, trebuchet ms, verdana, arial, sans-serif;
                 color: #fff;
                 text-transform: uppercase;
                 filter: grayscale(0.85) contrast(0.85);
                 transition: .3s;
                 cursor: pointer;
             }

                 button:focus, button:hover {
                     outline: none;
                     filter: none;
                 }

                 button:active {
            .........完整代码请登录后点击上方下载按钮下载查看