button.send 	
	.text SEND
	.loader
	.done SUCCESS
View Compiled
$blue: #333ddd;
$white: #fff;

body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: $blue;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Montserrat';
	font-weight: 700;
	padding-top: 50vh;
}

button {
	outline: 0;
	
	&.active {
		outline: 0;
	}
}

button.send {
	border: 2px solid $white;
	color: white;
	border-radius: 50px;
	padding: 15px 80px;
	background: transparent;
	position: relative;
	overflow: hidden;
	transform: translateY(-50%);
	
	.text {
		
		&.active {
			transform: translateY(-350%) scale(0);
			transition: .35s cubic-bezier(.34,-0.61,1,.64);
		}
	}
	
	&.active {
		padding: 0px 80px;
		transition: .4s cubic-bezier(.35,-0.77,.67,1.88);
	}
	
	.loader {
		position: absolute;
		width: calc(0% - 4px);
		height: calc(100% - 4px);
		background-color: $white;
		left: 2px;
		top: 2px;
		border-radius: 50px;
		
		&.active {
			width: calc(100% - 4px);
			transition: 1.3s ease-in-out;
			transition-delay: .5s
		}
	}
	
	.done {
		color: $blue;
		margin-top: -20px;
		transform: translateY(300%) scale(0);
		
		&.active {
			transform: translateY(0%) scale(1);
			transition: .4s cubic-bezier(.34,-0.61,1,.64);
		}
	}
	
	&.finished {
		padding: 15px 80px;
		transition: .4s cubic-bezier(.35,-0.77,.67,1.88);
	}
}
View Compiled
$(".send").on('click', function(){
	$(".text").addClass("active");
	$(".send").addClass("active");
	$(".loader").addClass("active");
	$(".send").delay(1700).queue(function(){
        $(this).addClass("finished").clearQueue();
    });
	
	$(".done").delay(1600).queue(function(){
        $(this).addClass("active").clearQueue();
    });
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js