cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              .board
 -16.times do
  .wrap
   %input{:type => "checkbox"}/
   .button
   %h1 Do Something
            
          
!
            
              $b: #0051fb;
$bg: #181047;
$w: #fff;
$t: transparent;
$g: #ededec;

body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  font-family:'Raleway';
  font-weight:900;
  perspective:800px;
  background: linear-gradient(to bottom, $w 50%, $bg 50%);
  overflow:hidden;
  .board{
    width:600px;
    height:400px;
    min-width:600px;
    display:grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 25% 25% 25% 25%;
    position:relative;
    background:$g;
    box-shadow:inset 0 0 0 2px $bg;
    transform-style:preserve-3d;
    transform:rotateX(10deg);
    padding:20px;
    &:before{
      content:'';
      position:absolute;
      width:100%;
      height:50px;
      bottom:-50px;
      box-shadow:inset 2px 0 0  $bg, inset -2px 0 0  $bg, 0 0px 0 0 $bg, 0 4px 0 0 $bg;
      transform-origin:top;
      transform:rotateX(-50deg);
      background:$g;
    }
    .wrap{
      position:relative;
      input{
        position:absolute;
        width:100%;
        height:100%;
        opacity:0;
        z-index:999;
      }
      .button{
        left:50%;
        top:50%;
        transform:translateX(-50%) translateY(-50%);
        z-index:3;
        position:absolute;
        transition:0.2s ease-in-out;
      }
       h1{
          font-size:14px;
          position:absolute;
          bottom:0px;
          left:50%;
          transform:translateX(-50%);
          width:120px;
          background:$w;
          padding:5px;
          color:$bg;
          box-shadow:0 0 0 2px $bg;
          text-align:center;
          text-transform:uppercase;
          display:inline-block;
         &:before{
           content:'';
           position:absolute;
           width:3px;
           height:3px;
           background:$bg;
           left:2.5px;
           top:2.5px;
           border-radius:100%;
           box-shadow:122px 0 0 $bg, 122px 18px 0 $bg, 0px 18px 0 $bg;
         }
        }
      &:nth-of-type(11){
        display:none;
      }
      &:nth-of-type(10){
        grid-column: 2 / span 2;
        input{
          &:checked ~ .button{
            transform:translateX(-50%) translateY(calc(-50% + 5px));
            box-shadow:0 0 0 2px $b, 0 0px 0 2px $b, 0 7px 0 8px $w, 0 7px 0 10px $bg;
            z-index:999;
            &:before{
              transform:rotateX(-10deg) translateZ(20px);
              opacity:1;
              z-index:998;
              height:100vh;
              width: 100vw;
            }
            &:after{
              transform:rotateX(-10deg) translateZ(20px);
              opacity:1;
              z-index:999;
              height:50vh;
              width: 50vw;
            }
          }
        }
        .button{
          width:100px;
          height:30px;
          position:absolute;
          border-radius:0%;
          box-shadow:0 0 0 2px $b, 0 5px 0 2px $b, 0 12px 0 8px $w, 0 12px 0 10px $bg;
          margin-top:-30px;
          background: repeating-linear-gradient(45deg,$b,$b 2px,$t 2px,$t 4px), $w;
          transform-style:preserve-3d;
          &:before{
            content:'';
            position:absolute;
            background:$b;
            height:0;
            width: 0;
            margin-left: calc(-50vw + 50%);
            margin-top: calc(-50vh + 50%);
            transform-style:preserve-3d;
            transform:rotateX(-10deg) translateZ(-20px);
            top:-150%;
            box-shadow:0 0 0 500px $b;
            z-index:-1;
            opacity:0;
            transition:opacity 0.2s ease-in-out;
          }
          &:after{
            content:'22 DEAD IN SCHOOL SHOOTING';
            position:absolute;
            color:$w;
            display:inline-block;
            transform-style:preserve-3d;
            transform:rotateX(-10deg) translateZ(20px);
            top:0%;
            left:-50%;
            width:0;
            height:0;
            box-shadow:0 0 0 500px $b;
            z-index:-1;
            opacity:0;
            transition:opacity 0.2s ease-in-out;
          }
        }
        h1{
          font-size:0px;
          background:transparent;
          box-shadow:none;
          width:200px;
          bottom:10px;
          margin-left:-10px;
          &:after{
            content:'THOUGHTS AND PRAYERS';
            font-size:14px;
            background:$w;
            padding:5px 20px;
            box-shadow:0 0 0 2px $bg;
          }
          &:before{
             content:'';
             position:absolute;
             width:3px;
             height:3px;
             background:$bg;
             left:10px;
             top:2.5px;
             border-radius:100%;
             box-shadow:202px 0 0 $bg, 202px 18px 0 $bg, 0px 18px 0 $bg;
          }
        }
      }
      &:nth-of-type(1), &:nth-of-type(8), &:nth-of-type(15){
        input{
          &:checked ~ .button{
            transform:translateX(-50%) translateY(calc(-50% + 5px));
            box-shadow:0 0 0 2px $b, 0 0px 0 2px $b, 0 7px 0 8px $w, 0 7px 0 10px $bg;
          }
        }
        .button{
          width:30px;
          height:20px;
          position:absolute;
          border-radius:100%;
          box-shadow:0 0 0 2px $b, 0 5px 0 2px $b, 0 12px 0 8px $w, 0 12px 0 10px $bg;
          margin-top:-30px;
          background: repeating-linear-gradient(45deg,$b,$b 2px,$t 2px,$t 4px), $w;
          
        }
      }
      &:nth-of-type(3), &:nth-of-type(12){
        input{
          &:checked ~ .button{
            transform:translateX(-50%) translateY(calc(-50% + 5px));
            box-shadow:0 0 0 2px $b, 0 0px 0 2px $b, 0 7px 0 8px $w, 0 7px 0 10px $bg;
          }
        }
        .button{
          width:60px;
          height:20px;
          position:absolute;
          border-radius:0%;
          box-shadow:0 0 0 2px $b, 0 5px 0 2px $b, 0 12px 0 8px $w, 0 12px 0 10px $bg;
          margin-top:-30px;
          background: repeating-linear-gradient(45deg,$b,$b 2px,$t 2px,$t 4px), $w;
        }
        
      }
      &:nth-of-type(14), &:nth-of-type(5){
        input{
          &:checked ~ .button{
            transform:translateX(-50%) translateY(calc(-50% + 5px));
            box-shadow:0 0 0 2px $b, 0 0px 0 2px $b, 0 7px 0 8px $w, 0 7px 0 10px $bg;
          }
        }
        .button{
          width:30px;
          height:20px;
          position:absolute;
          border-radius:0%;
          box-shadow:0 0 0 2px $b, 0 5px 0 2px $b, 0 12px 0 8px $w, 0 12px 0 10px $bg;
          margin-top:-30px;
          background: repeating-linear-gradient(45deg,$b,$b 2px,$t 2px,$t 4px), $w;
        }
        
      }
      &:nth-of-type(2), &:nth-of-type(13), &:nth-of-type(4), &:nth-of-type(6){
        input{
          &:checked ~ .button{
            transform:translateY(-50%) translateX(calc(-50% + 65px));
            &:before{
              margin-left:-65px;
            }
          }
        }
        .button{
          width:10px;
          height:30px;
          position:absolute;
          border-radius:0%;
          box-shadow:0 0 0 2px $b, 0 5px 0 2px $b;
          margin-left:-35px;
          margin-top:-30px;
          background: repeating-linear-gradient(45deg,$b,$b 2px,$t 2px,$t 4px), $w;
          z-index:9;
          transform-style:preserve-3d;
          &:before{
            content:'';
            position:absolute;
            width:90px;
            top:10px;
            left:-5px;
            height:100%;
            background:linear-gradient(to bottom, $w 37%, $bg 37%, $bg 45%, $w 45%);
            transform-style:preserve-3d;
            transform:translateZ(-10px);
            box-shadow:0 0 0 2px $bg, inset 0 0 0 5px $w;
            transition:0.2s ease-in-out;
          }
        }
        
      }
      &:nth-of-type(4), &:nth-of-type(6){
        input{
          &:checked ~ .button{
            transform:translateY(-50%) translateX(calc(-50% - 65px));
            &:before{
              margin-left:65px;
            }
          }
        }
        .button{
          margin-left:40px;
          &:before{
            left:-75px;
          }
        }
        
      }
      &:nth-of-type(7), &:nth-of-type(9), &:nth-of-type(16){
        perspective:100px;
         input{
          &:checked ~ .button{
            transform:rotateX(-50deg) translateX(-50%) translateY(-50%) rotate(20deg);
            &:before{
              transform:translateZ(-10px) rotate(-20deg) translateX(3.75px) translateY(1px);
            }
          }
        }
        .button{
          width:5px;
          height:30px;
          position:absolute;
          border-radius:50px 50px 0 0;
          box-shadow:0 0 0 2px $b;
          margin-left:0px;
          margin-top:-35px;
          background: $w;
          z-index:9;
          transform-style:preserve-3d;
          transform-origin:100% 100%;
          transform:rotateX(-50deg) translateX(-50%) translateY(-50%) rotate(-20deg);
          &:before{
            content:'';
            position:absolute;
            bottom:-5px;
            width:30px;
            height:27.5px;
            background:$b;
            box-shadow:0 1px 0 3px $bg, inset 0 0 0 9px $w;
            border-radius:100%;
            transform:translateZ(-10px) rotate(20deg) translateX(-3.5px);
            left:-12.5px;
            top:27.5px;
            transition:0.2s ease-in-out;
          }
        }
        
      }
      &:nth-of-type(16){
        input{
          &:checked ~ .button{
            transform:rotateX(-50deg) translateX(-50%) translateY(-50%) rotate(-20deg);
            &:before{
              transform:translateZ(-10px) rotate(20deg) translateX(-4px) translateY(-1px);
            }
          }
        }
        .button{
          transform:rotateX(-50deg) translateX(-50%) translateY(-50%) rotate(20deg);
          &:before{
            transform:translateZ(-10px) rotate(-20deg) translateX(3.5px);
          }
        }
      }
    }
  }
}
            
          
!
999px
Loading ..................

Console