A Pen by Edan Kwan.

Click-my-penis-to-see-more!.markdown

Click my penis to see more!

Inspired by the effect on Android when you switch the screen off

A Pen by Edan Kwan on CodePen.

License.

index.html

<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>
<div><input type="checkbox"/><p>PENIS</p></div>

style.css

html, body{
  width: 100%;
  height: 100%;
  background-color: #000;
  overflow: hidden;
  
  font-family: 'Racing Sans One', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
}
div {
  display: inline-block;
  position: relative;
}

input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

p{
  color: #fff;
  font-size: 72px;
  transition: all .15s ease-in-out;
  pointer-events: none;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-radius: 200px;
}
input:checked ~ p{
  transform: scale3d(1.5,0,1);
  background-color: #fff;
  border-left: 20px solid #fff;
  border-right: 20px solid #fff;
}