A CodePen by Stein. Progress Bar Button - The idea is to create a button which becomes clickable when [something] is done loading.

index.html

  <div id="pb">  	
		<div id="progress">
			<div id="done">Done!</div>
		</div>
		Loading...
	</div>

style.css

* {
    margin:0px;
		padding:0px;
		border:0px;
		font-family: sans-serif;
		cursor:default;
    -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;   
	}
	body {
		background: url(http://subtlepatterns.com/patterns/cartographer.png);
	}
	#pb {
		-webkit-box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.5), inset 1px 1px 20px rgba(0, 0, 0, 0.5);        
        box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.5), inset 1px 1px 20px rgba(0, 0, 0, 0.5);
		background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/subtle_surface.png);
        width:250px;
        height:38px;
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-19px;
        margin-left:-125px;
        border-radius:8px;
        border-top:2px solid #DDD;
        border-left:2px solid #DDD;
        border-bottom:2px solid #BBB;
        border-right:2px solid #BBB;
        padding:3px;
        overflow:hidden;
        text-align:center;
        line-height:38px;
        font-size:14px;
        font-weight:bold;
        color:#666;
	}
	#progress {
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		height:38px;
		width:48px;
		background-color: #0080FF;
		border-radius:6px;
		background: #6db3f2;
		background: -moz-linear-gradient(top,  #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-8 */
		-webkit-box-shadow: inset 0px 0px 5px  rgba(0, 0, 0, 0.2), 2px 2px 5px  rgba(0, 0, 0, 0.2);        
        box-shadow: inset 0px 0px 5px  rgba(0, 0, 0, 0.2), 2px 2px 5px  rgba(0, 0, 0, 0.2);
        position:absolute;
        overflow:hidden;      
	}
	#done:active {
		-webkit-box-shadow: inset 0px 0px 18px  rgba(0, 0, 0, 0.4);        
        box-shadow: inset 0px 0px 18px  rgba(0, 0, 0, 0.4);
        border-radius:6px;
	}
	#done {
		text-align:center;
        line-height:38px;
        font-size:14px;
        font-weight:bold;
        color:#EEE;
        height:38px;
		width:250px;
		text-shadow: 0px -1px 0px rgba(0,0,0,0.2);		
        cursor:pointer;  
	}
	#pb:hover #progress{
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		width:250px;
	}