<div class="container">
	<label>
		<input class="check" type="checkbox">
		<div class="btn">
			<span class="me">download</span>
			<span class="mo">Hang on a moment, download in progress</span>
		</div>
	</label>
</div>

@import url(https://fonts.googleapis.com/css?family=Nunito:400,700,300); 

body{
	font-family: 'Nunito', sans-serif;
	background-color: #060e33;
}

.container{
	position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
	.check{
		display:none;
	}
	.btn{
		text-transform: uppercase;
		color: #fff;
		border: 2px solid #cb134e;
		display: inline-block;
		padding: 15px;
		padding-right: 50px;
		padding-left: 50px;
		border-radius: 3px;
		cursor: pointer;
		overflow: hidden;
		box-sizing: border-box;
		font-size:14px;
		transition: all .3s ease;
		.mo{
			position:relative;
			overflow:hidden;
			bottom: -150px;
			width:0px;
			height:0px;
			text-align:center;
			display: inline-block;
		   opacity:0;
			color: #272727;
		}
		&:before{
			width:0%;
			position: absolute;
			left:0;
			bottom:3px;
			height: 5px;
			background-color: #cb134e;
			content: "";		
		}
		&:after{
			width:100%;
			height:0%;
			position:absolute;
			bottom:3px;
			left:0;
			background-color: #cb134e;
			content: "Download complete";
			overflow:hidden;
			text-align:center;
			line-height: 180px;
		}
		
		&:hover{
			background-color: #cb134e;
			color: #060e33;
		}
	}
	input[type=checkbox]:checked ~ .btn{
			background: #ddced9;
			border-radius: 0px;
			border: none;
			padding-top: 70px;
			padding-bottom: 70px;
			padding-left: 200px;
			padding-right: 200px;
			transition: all .5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
			
			&:before{
				width:100%;
				content: "";
				color: #fff;
				text-align: center;
				line-height: 70px;
				transition: all 3.5s linear;
			}
			&:after{
				height:calc(100% - 3px);
				color: #060e33;
				transition: all .3s ease-in-out;
				transition-delay: 3.5s;
			}
			.me{
				display:none;
			}
			.mo{
				transition:bottom .4s ease, opacity 1s ease;
				transition-delay:.3s;
				height: auto;
				width:auto;
				bottom: 0px;
				opacity: 1;
			}
		}
}

//no