SOURCE

<div class="page">
           <div class="wrap-header">
               <div id="header">
                   <div class="inner clearfix">
                   </div>
               </div>
           </div>
           <div class="rap-container">
               <div id="container" class="clearfix">
                   <div id="main">
                       <div class="inner clearfix">
                          <div class="section-block">
                            <div class="section-hd">
                              <h3>downloading...</h3>
                            </div>
                            <div class="section-bd">
                              <div class="button-wrap">
                                <label for="download" class="download-btn"></label>
                                <input type="checkbox" id="download" style="display:none;"/>
                                <span></span>
                              </div>
                            </div>
                          </div>
                       </div>
                   </div> 
               </div>
           </div>
           <div class="wrap-footer">
               <div id="footer">
                   <div class="inner clearfix"></div>
               </div>
           </div>
       </div>

@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon.eot");
  src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype"), url("../fonts/icomoon.woff") format("woff"), url("../fonts/icomoon.ttf") format("truetype"), url("../fonts/icomoon.svg#icomoon") format("svg");
  font-weight: normal;
  font-style: normal; }

html, body {
  background: -moz-radial-gradient(center top, circle, #e6e6e6, #d6dae3, #bcc2cd);
  background: -webkit-radial-gradient(center top, circle, #e6e6e6, #d6dae3, #bcc2cd);
  width: 100%;
  height: 100%; }

.section-hd {
  text-align: center;
  margin-bottom: 20px; }
  .section-hd h3 {
    font-size: 40px; }

.section-block {
  width: 500px;
  margin-left: auto;
  margin-right: auto; }

.section-hd {
  text-align: center; }
  .section-hd h3 {
    font-family: HelveticaNeue;
    font-size: 24px;
    color: #777c85;
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.25); }

.button-wrap {
  margin: 10px auto;
  width: 240px;
  height: 240px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 120px;
  box-shadow: 0 2px 2px rgba(255, 255, 255, 0.5), inset 0 2px 12px rgba(0, 0, 0, 0.2);
  background-image: -webkit-linear-gradient(-85deg, rgba(0, 204, 255, 0.35), rgba(0, 173, 216, 0.55) 70%, rgba(0, 173, 216, 0.4));
  background-image: -moz-linear-gradient(-85deg, rgba(0, 204, 255, 0.35), rgba(0, 173, 216, 0.55) 70%, rgba(0, 173, 216, 0.4)); }
  .button-wrap span {
    position: absolute;
    top: 0;
    left: 0;
    width: 240px;
    height: 240px;

	  overflow:hidden;
    background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#c6cbd5), to(#d6dce6));
    background-image: -webkit-linear-gradient(bottom, #c6cbd5, #d6dce6);
    background-image: -moz-linear-gradient(bottom, #c6cbd5, #d6dce6);
    background-image: -o-linear-gradient(bottom, #c6cbd5, #d6dce6);
    background-image: linear-gradient(bottom, #c6cbd5, #d6dce6);
    z-index: 2;
    -webkit-transition: top 2s ease;
    -moz-transition: top 2s ease;
    -o-transition: top 2s ease;
    transition: top 2s ease; }

.download-btn {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -100px;
  width: 200px;
  height: 200px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  background-color: #f3f3f3;
  -webkit-box-shadow: 0 8px 12px rgba(0, 0, 0, 0.35), inset 0 2px 2px white;
  -moz-box-shadow: 0 8px 12px rgba(0, 0, 0, 0.35), inset 0 2px 2px white;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.35), inset 0 2px 2px white;
  background-image: -webkit-linear-gradient(bottom, #b3b7c2, #f4f5f6);
  background-image: -moz-linear-gradient(bottom, #b3b7c2, #f4f5f6);
  background-image: -o-linear-gradient(bottom, #b3b7c2, #f4f5f6);
  background-image: -ms-linear-gradient(bottom, #b3b7c2, #f4f5f6);
  background-image: linear-gradient(to top, #b3b7c2, #f4f5f6);
  z-index: 100; }
  .download-btn:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -60px;
    margin-top: -60px;
    width: 120px;
    height: 120px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 10px rgba(255, 255, 255, 0.05), 0 2px 2px rgba(255, 255, 255, 0.75), inset 0 4px 20px rgba(198, 202, 211, 0.35);
    -moz-box-shadow: 0 0 10px rgba(255, 255, 255, 0.05), 0 2px 2px rgba(255, 255, 255, 0.75), inset 0 4px 20px rgba(198, 202, 211, 0.35);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.05), 0 2px 2px rgba(255, 255, 255, 0.75), inset 0 4px 20px rgba(198, 202, 211, 0.35);
    background-image: -webkit-linear-gradient(bottom, #d9dbe2, #d2d5d9);
    background-image: -moz-linear-gradient(bottom, #d9dbe2, #d2d5d9);
    background-image: -o-linear-gradient(bottom, #d9dbe2, #d2d5d9);
    background-image: -ms-linear-gradient(bottom, #d9dbe2, #d2d5d9);
    background-image: linear-gradient(to top, #d9dbe2, #d2d5d9); }
  .download-btn:after {
    font-family: 'icomoon';
    content: '\e074';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -60px;
    margin-top: -60px;
    width: 120px;
    height: 120px;
    text-align: center;
    line-height: 120px;
    font-size: 40px;
    color: #9DA3B4;
    text-shadow: 0 1px 1px #fff; }

input[type="checkbox"]:checked ~ span {
  top: -240px; }