<!--tes-magic-button-->
<center><style>
.heads {width: 415px; height: 225px; position: relative; background: #000; overflow: hidden; border: 20px solid #000;}
.head { float: left; }
.head label { display: block; height: 15px; width: 80px;  background: #eee; padding: 10px; position: relative; top: 190px; font-family: titillium web; font-weight: 600; text-transform: uppercase; font-size: 10px; line-height: 15px; z-index: 3;}
.head [type=radio] { display: none;  }
.der { position: absolute; top: 225px; bottom: 40px; left: 0px; right: 0px; -webkit-transition: all 0.9s ease-in; -moz-transition: all 0.9s ease-in; -o-transition: all 0.9s ease-in; transition: all 0.9s ease-in; }
.head [type=radio]:checked ~ label { color: #fff; z-index: 2; }
.head [type=radio]:checked ~ label ~ .der { z-index: 1; top: 0px;}
.hlink { width: 105px; height: 33px;  float: left; margin-top: 5px; font-family: titillium web; font-weight: 600; text-transform: uppercase; font-size: 10px; line-height: 33px; color: #000; box-shadow: 0px 0px 0px  #8cdf50 inset; -webkit-transition: all 0.4s ease-in; -moz-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; transition: all 0.4s ease-in;} 
.hlink:hover { color:#fff; box-shadow: 105px 0px 0px  #8cdf50 inset;}
.htit { font-family: titillium web; font-weight: 900; font-size: 90px; text-align: center; color: #fff; text-transform: uppercase; line-height: 85%; margin-top: 15px; }
.hwtit { width: 195px; height: 40px; background: #8cdf50; float: left; font-family: titillium web; font-weight: 900; font-size: 20px; text-align: center; text-transform: uppercase; line-height: 40px; color: #000; }
.hwelc { width: 155px; height: 105px; background: #fff; float: left; padding-right: 5px; border: 20px solid #fff; border-right: 15px solid #fff; font-family: gerogia; font-size: 10px; text-align: justify; overflow: auto }
.hstafi { width: 205px; height: 90px; float: left; }
.hstafn { width: 205px; height: 50px; color: #000; font-family: titillium web; font-weight: 900; line-height: 70px; font-size: 30px; text-transform: uppercase; text-align: center; opacity: 0;-webkit-transition: all 0.9s ease-in; -moz-transition: all 0.9s ease-in; -o-transition: all 0.9s ease-in; transition: all 0.9s ease-in;}
.hstaft { width: 185px; height: 39px; padding: 0px 10px; border-top: 1px solid #000; color: #000; font-family: titillium web; font-weight: 600; font-size: 15px; text-align: right; line-height: 100%;  text-transform: uppercase; opacity: 0; -webkit-transition: all 0.9s ease-in; -moz-transition: all 0.9s ease-in; -o-transition: all 0.9s ease-in; transition: all 0.9s ease-in;} 
.hstafi:hover .hstafn { opacity: 1; } .hstafi:hover .hstaft { opacity: 1; }
.hcr { -webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); position: relative; top: 115px; }
.hcredt { width: 70px; height: 185px; background: #41a9aa; float: left; font-family: titillium web; font-weight: 900; font-size: 40px; text-align: center; text-transform: uppercase; line-height: 40px; color: #fff; }
.hcred { width: 285px; text-align: justify; height: 125px; padding-right: 5px; border: 30px solid #fff; border-right: 25px solid #fff; background: #fff; overflow: auto; float: right;}
</style>
<div class="heads"><div class="head"><input type="radio" id="head-1" name="head-group-1" checked="">
<label for="head-1" style="margin-right: 5px; background: #a062a7;">One</label>
<div class="der" style="background: #000;">
<div class="htit">we come <span style="font-size: 80px;">in</span> <span style="font-size: 100px;">peace</span></div>
</div></div>

<div class="head"><input type="radio" id="head-2" name="head-group-1">
<label for="head-2" style="margin-right: 5px; background: #fcb15b;">Two</label>
<div class="der">
<div style="width: 200px; height: 185px; float: left;">
<div class="hwtit">welcome</div>
<div class="hwelc">all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy all work and no play makes jack a dull boy</div></div>
<div style="width: 215px; height: 185px; float: right;">
<div class="hlink" style="background: #fcb15b; margin-right: 5px; margin-top: 0px;">rules</div>
<div class="hlink" style="background: #41a9aa; margin-top: 0px;">plot</div>
<div class="hlink" style="background: #a062a7; margin-right: 5px;">cannon</div>
<div class="hlink" style="background: #fcb15b;">link</div>
<div class="hlink" style="background: #41a9aa; margin-right: 5px;">link</div>
<div class="hlink" style="background: #a062a7;">link</div>
<div class="hlink" style="background: #fcb15b; margin-right: 5px;">link</div>
<div class="hlink" style="background: #41a9aa;">link</div>
<div class="hlink" style="background: #a062a7; margin-right: 5px;">link</div>
<div class="hlink" style="background: #fcb15b;">members</div>
</div>
</div></div>

<div class="head"><input type="radio" id="head-3" name="head-group-1">
<label for="head-3" style="margin-right: 5px; background: #8cdf50;">Three</label>
<div class="der">
<div class="hstafi" style="background: url(http://placehold.it/205x90);"><div class="hstafn" style="background: #a062a7;">staff name</div>
<div class="hstaft" style="background: #a062a7;">administrator</div></div>
<div class="hstafi" style="margin-left: 5px; background: url(http://placehold.it/205x90);"><div class="hstafn" style="background: #fcb15b;">staff name</div><div class="hstaft" style="background: #fcb15b;">administrator</div></div>
<div class="hstafi" style="margin-top: 5px; background: url(http://placehold.it/205x90);"><div class="hstafn" style="background: #8cdf50;">staff name</div>
<div class="hstaft" style="background: #8cdf50;">moderator </div></div>
<div class="hstafi" style="margin-left: 5px; margin-top: 5px; background: url(http://placehold.it/205x90);"><div class="hstafn" style="background: #41a9aa;">staff name</div><div class="hstaft" style="background: #41a9aa;">moderator</div></div>
</div></div>

<div class="head"><input type="radio" id="head-4" name="head-group-1">
<label for="head-4" style="background: #41a9aa;">Four</label>
<div class="der">
<div class="hcredt"><div class="hcr">credits</div></div>
<div class="hcred">the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay the credits go here yay </div>
</div></div>

</div></center>