div+css实现立体质感按钮形loading加载动画效果代码-html代码-BFW代码库

div+css实现立体质感按钮形loading加载动画效果代码

代码语言：html

代码描述：div+css实现立体质感按钮形loading加载动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        * {margin: 0; padding: 0;}
        body {	
        	background: #222;
        }
        .loader-ring {
          top: calc(50% - 100px);
          left: 50%;
          pointer-events: none;
        }
        #long-tail {
          visibility: hidden;
        }
        .btn {
          position: absolute;
          cursor: pointer;
          min-width: 90px;
          min-height: 90px;
          line-height: 90px;
          background: #25292C;
          margin: auto auto;
          top: calc(50% - 50px);
          left: calc(50% - 50px);
          text-align: center;
          border-radius: 999px;
          color: rgba(155,155,155,1);
          text-shadow: -1px -1px 0px rgba(255,255,255,0.8), 1px 1px 2px rgba(0,0,0,1);
          font-family: sans-serif;
          box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3), 
                      inset 3px 15px 45px rgba(255,255,255,0.1),
                      inset -1px -1px 2px rgba(0,0,0,0.5), 
                      inset -3px -15px 45px rgba(0,0,0,0.2),
                      1px 5px 30px -4px rgba(0,0,0,1);
          transition: 0.1s ease-out;
        }
        
        .btn:before {
          content: "";
          cursor: pointer;
          background: #1A1A1A;
          width: 120px;
          height: 120px;
          position: absolute;
          top: -15px;
          left: -15px;
          z-index: -99;
          border-radius: 999px;
          box-shadow: inset -1px -1px 2px rgba(255,255,255,0.3), 
            inset -5px -15px 40px rgba(255,255,255,0.1),
            inset 1px 1px 2px rgba(0,0,0,0.5), 
            inset 5px 15px 40px rgba(0,0,0,0.2),
            -2px -40px 50px -20px rgba(255,255,255,0.1),
            2px 35px 50px -10px rgba(0,0,0,0.4),
            0px 0px 25px 8px rgba(60,60,60,1);
        }
        
        .btn:active, input:checked + .btn {
          text-shadow: 1px 1px 0px rgba(255,255,255,0.15);
          box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3), 
                      inset 3px 15px 45px rgba(0,0,0,0.2),
                      inset -1px -1px 2px rgba(0,0,0,0.5), 
                      inset -3px -15px 45px rgba(255,255,255,0.1),
         .........完整代码请登录后点击上方下载按钮下载查看