A Pen by Alexander Johansson.

A-Pen-by-Alexander-Johansson.markdown

A Pen by Alexander Johansson

A Pen by Alexander Johansson on CodePen.

License.

index.jade

.dot
  .outer
  .inner

style.stylus

$orange = #d35400;
body {
  height: 100%;
  width: 100%;
  background: #34495e;
}

* {
  box-sizing: border-box;
}


centerize() {
    left: 50%;
    top: 50%;

    margin-left: (-@width/2);
    margin-top: (-@height/2);
}



.dot {
    position: absolute;
    left: 50%;
    top: 50%;
    
    width: 40px;
    height: 40px;

    margin-left: (-@width/2);
    margin-top: (-@height/2);

    .inner, .outer {
      
        position: absolute;
        display: block;
        content: "";
        border-radius: 1000px;

        transition: all 0.2s ease-out;
    }
    .outer {
        background: $orange;
        width: 16px;
        height: 16px;

        centerize();
    }
    .inner {
        border: 4px solid #ecf0f1;
        width: 8px;
        height: 8px;

        centerize();
    }
    &:hover {
        .inner {
            width: 24px;
            height: 24px;
            border-width: 6px;
            centerize();
        }
    }
}