Interactive upload button

index.html

<svg id="svg-source" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute">
	<g id="check" data-iconmelon="Simple Line Icons:62e3519b8d1506453144dd389ae63264">
		<g>
			<path  d="M22.491,11.622l-7.915,7.632l-4.953-5.138c-0.221-0.229-0.586-0.235-0.812-0.014
					c-0.228,0.219-0.236,0.581-0.016,0.812l5.354,5.55c0.109,0.112,0.251,0.221,0.414,0.176c0.147,0,0.291-0.06,0.398-0.162
					l8.326-8.033c0.229-0.219,0.235-0.582,0.016-0.81C23.082,11.409,22.72,11.403,22.491,11.622z"></path>
		</g>
	</g>
</svg>
		
<button class="btn"> UPLOAD
	<div class="icon">
		<svg viewBox="0 0 32 32">
			<g filter="">
				<use xlink:href="#check"></use>
			</g>
		</svg>
	</div>
</button>
				
<div class="rest"></div>
		
<div class="arrow">
	<h2>Click Me</h2>
</div>

Interactive upload button.markdown

Interactive upload button

Created this pen based on a Vince de Asis' Dribbble shot

A Pen by Irem Lopsum on CodePen.

License.

script.js

$(".btn").click(function(){
	$("button").addClass("active");
	$(".rest").addClass("active");
	$(".icon").addClass("active");
	$(".arrow").addClass("active");
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

$mainColor: rgb(129,154,169);
$bg: rgb(226,229,230);
$crimson: rgb(243,109,102);

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: 'Open Sans';
	background-color: $bg;
	display: flex;
   align-items: center;
   justify-content: center;
}

*, *:before, *:after, button {
	margin: 0;
	padding: 0;
	box-sizing: content-box;
	
	&:focus {
		outline: 0;
	}
}

.icon {
  	position: absolute;
  	width: 64px;
  	height: 64px;
  	display: block;
  	fill: lighten($bg,100%);
	top: -20px;
	opacity: 0;
	left: calc(50% - 32px);

	&.active {
		top: 0px;
		opacity: 1;
		transition: .3s ease-in-out;
		transition-delay: 2.8s;
	}
}

.btn {
	width: 150px;
	height: 60px;
	position: relative;
	background-color: transparent;
	border: 2px solid $mainColor;
	border-radius: 50px;
	font-family: 'Open Sans';
	color: $mainColor;
	font-weight: 400;
	font-size: 1.2em;
	cursor: pointer;
	overflow: hidden;
	
	&.active {
		animation: upload 3s ease-in-out forwards;
	}
}

.rest {
	transform: scale(0);
  	clip: rect(0, 84px, 84px, 42px); 
  	height: 84px;
  	width: 84px;
  	position: absolute;
  	left: calc(50% - 42px);
  	top: calc(50% - 42px);
	  
	&.active {
		animation: animate 1.05s linear 2;
		animation-delay: .6s;
		
		&:after {
			animation: animate2 1.05s linear 2;
			animation-delay: .6s;
		}
	}
	  
	&:after {
		transform: scale(0);
  		clip: rect(0, 84px, 84px, 42px);
  		content:'';
  		border-radius: 50%; 
  		height: 84px;
  		width: 84px;
  		position: absolute; 
	}
}



@keyframes upload {
	0%{
		width: 150px;
		height: 60px;
		color: $mainColor;
		background-color: transparent;
	}
	7% {
		width: 155px;
		height: 55px;
		font-size: 1.25em;
		color: #ffffff;
		background-color: $mainColor;
	}
	10% {
		width: 150px;
		height: 60px;
		font-size: 1.2em;		
		color: transparent;
	}
	20% {
		width: 60px;
		height: 60px;
		font-size: 0em;
		background-color: transparent;
	}
	90% {
		width: 60px;
		height: 60px;
		color: transparent;
		font-size: 0em;
		background-color: transparent;
	}
	100%{
		width: 150px;
		height: 60px;
		color: transparent;
		font-size: 0em;
		background-color: $mainColor;
	}
}

@keyframes animate {
  	0% {
		transform: scale(1); 
    	transform: rotate(0deg)
  	}
  	100% { 
	  	transform: scale(1);
   	 	transform: rotate(220deg)
  	}
}

@keyframes animate2 {
  	0% {
    	box-shadow: inset $crimson 0 0 0 4px;
    	transform: rotate(-140deg);
  	}
  	100% {
    	box-shadow: inset $crimson 0 0 0 4px;
    	transform: rotate(140deg);
  	}
}

@keyframes done {
	0% {top: -20px};
	100% {top: 0px};
}


.arrow {
	width: 50px;
	height: 2px;
	background-color: $mainColor;
	position: absolute;
	border-radius: 5px;	
	margin-left: 30px;
	animation: mainMove .5s ease-in-out infinite alternate;
	
	&:before {
		content: "";
		display: block;
		width: 20px;
		height: 2px;
		background-color: $mainColor;
		margin-left: 1px;
		border-radius: 5px;	
		transform-origin: 0% 50%;
		transform: rotate(-35deg);
	}
	
	&:after {
		content: "";
		display: block;
		width: 20px;
		height: 2px;
		margin-left: 1px;
		margin-top: -2px;
		border-radius: 5px;	
		background-color: $mainColor;
		transform-origin: 0% 50%;
		transform: rotate(35deg);
	}
	
	h2 {
		position: absolute;
		font-weight: 300;
		margin-left: 60px;
		width: 100px;
		margin-top: -19px;
		color: $mainColor;
	}
	&.active {
		display: none;
	}
}

@keyframes mainMove {
	0% {
		margin-left: 30px;
	}
	100% {
		margin-left: 15px;
	}
}