cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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.

            
              <div class="board">
   <div class="board-inner">
     <div class="wrapper-labels">
       <input type="radio" name="set" id="r1">
       <input type="radio" name="set" id="r2">
       <div class="show-next"></div>
<label class="set1" for="r1"><div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>  
       </label><label class="set2" for="r2"><div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div> 
       </label>  
     </div>
   </div>
 </div> 
            
          
!
            
              HTML,
BODY {
  height: 100%;
}

BODY {
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02) .5em, rgba(255,255,255,0) .5em, rgba(255,255,255,0) 1em),
    radial-gradient(hsl(200,100%,70%), hsl(220,100%,20%))
    ;
  background-size: cover;
  font: 20px/0 Georgia, serif;
  }
INPUT {
  display: none;
  }

.board {
  position: absolute;
  width: 20em;
  height: 22em;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid hsl(20, 40%, 20%);
  background: url(http://img-fotki.yandex.ru/get/9509/5091629.99/0_7d2a0_19c2b714_XL.jpg) 0 center;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.3),
              0 0 1em hsla(20, 40%, 30%, .8) inset,
              0 0 0 .2em hsla(20, 50%, 30%, .2) inset;
  }

.board-inner {
  position: absolute;
  top: 3em;
  right: 1em;
  bottom: 1em;
  left: 1em;
  border: .1em solid hsla(22, 28%, 50%,.6);
  background: linear-gradient(hsla(20, 40%, 30%,.4) .1em, hsla(20, 40%, 30%,0) 2px) repeat,
    linear-gradient(90deg,hsla(20, 40%, 30%,.4) .1em, hsla(20, 40%, 30%,0) 2px) repeat;
  background-size: 1em 1em;
  background-position: -.1em -.1em;
  }
  .board-inner:before {
    content: '';
    display: block;
    position: absolute;
    top: 2.8em;
    left: 2.8em;
    width: .3em;
    height: .3em;
    border-radius: 50%;
    background: hsla(25, 50%, 30%, .7);
    box-shadow: 6em 0 hsla(25, 50%, 30%, .7),
                12em 0 hsla(25, 50%, 30%, .7),
                0 6em hsla(25, 50%, 30%, .7),
                6em 6em hsla(25, 50%, 30%, .7),
                12em 6em hsla(25, 50%, 30%, .7),
                0 12em hsla(25, 50%, 30%, .7),
                6em 12em hsla(25, 50%, 30%, .7),
                12em 12em hsla(25, 50%, 30%, .7)
    }
.wrapper-labels {
  position: absolute;
  z-index: 1;
  top: .5em;
  right: .5em;
  bottom: .5em;
  left: .5em;
  }
LABEL {
  display: inline-block;
  width: 0px;
  height: 0px;
  }

  LABEL DIV {
    width: 17em;
    height: 17em;
    }
.show-next {
  display: block;
  position: absolute;
  width: 3em;
  height: 1.7em;
  overflow: hidden;
  top: -2.89em;
  left: -1.5em;
  right: -1.5em;
  margin: auto;
  border-radius: 1.5em;
  box-shadow: 0 0 0 .2em hsla(20, 50%, 30%, .2),
    0 0 .15em .1em hsla(25, 50%, 30%, .8) inset;
  box-sizing: border-box;
    }

  .show-next:before,
  .show-next:after {
    content: '';
    display: block;
    position: absolute;
    top: -.45em;
    bottom: -.45em;
    width: 0em;
    height: 0em;
    margin: auto;
    border-radius: 50%;
    background-position: -.1em  -.1em ;
    box-shadow: 0 0 3px hsla(50, 60%, 40%,.7) inset,
                .05em .05em .1em rgba(0,0,0,0.6); 
    transition: .3s;
    }

    .show-next:before {
      left: -.45em;
      right: .65em;
      }
    .show-next:after {
      left: .65em;
      right: -.45em;
      }

    :not(:checked) + :not(:checked) ~ .show-next:before,
    :checked + INPUT ~ .show-next:before,
    INPUT + :checked ~ .show-next:after{
      width: .9em;
      height: .9em;
      }

SPAN {
  display: inline-block;
  position: relative;
  width: 1em;
  height: 1em;
  margin: 0;
  cursor: pointer;
  }
  INPUT + :checked ~ .set1 SPAN {
    z-index: 2;
    }
  SPAN:before {
    content: "";
    color: red;
    display: block;
    position: absolute;
    top: -1em;
    right: -1em;
    bottom: -1em;
    left: -1em;
    width: 0.8em;
    height: 0.8em;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0 0 3px hsla(50, 60%, 40%,.7) inset,
                .05em .05em .1em rgba(0,0,0,0.6);
    opacity: 0;
    transition: opacity 100000s;
    }
    SPAN:active:before {
      opacity: 1;
      transition: opacity 0s;
      }

    .show-next:after,
    .set1 SPAN:before {
      background: radial-gradient(white, white .1em, silver .4em);  
      }
    .show-next:before,
    .set2 SPAN:before {  
      background: radial-gradient(#333, black .4em);
      }
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console