css实现按钮长阴影三维立体效果代码-html代码-BFW代码库

css实现按钮长阴影三维立体效果代码

代码语言：html

代码描述：css实现按钮长阴影三维立体效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        button {
          --border: 5px;    /* the border width */
          --color: #37E8FC; /* the color */
          
          font-size: 35px;
          padding: 0.25em 1.2em;
          cursor: pointer;
          border: none;
          font-weight: bold;
          color: var(--color);
          box-shadow: 
            0 0 0 200px inset var(--c,#0000),
            0 0 0 var(--border) inset var(--color);
          background: linear-gradient(var(--color) 0 0) bottom/100% 0% no-repeat;
          transition: color var(--t,0.3s), background-size 0.3s;
          position: relative;
        }
        button:before,
        button:after {
          content: "";
          position: absolute;
          inset: 0;
          pointer-events: none;
          clip-path: polygon(0 0,100% 0,calc(100% + 200vmax) 200vmax,200vmax calc(100% + 200vmax),0 100%);
          box-shadow: 0 0 0 200vmax var(--color);
          filter.........完整代码请登录后点击上方下载按钮下载查看