input(type="submit" role="submit")

input(type="button" role="delete" value="Delete")

input(type="button" role="send" value="Send")
View Compiled
$green: #1ECD97

*
	box-sizing: border-box

input 
	cursor: pointer

body
	height: 100vh
	width: 100%
	overflow: hidden
	display: flex
	justify-content: space-around
	align-items: center
	flex-direction: column

input[role="submit"]
	border: 2px solid $green
	background-color: transparent
	height: 60px
	line-height: 20px
	color: $green
	padding: 0
	width: 200px
	text-align: center
	border-radius: 200px
	font-size: 20px
	transition: all 200ms ease-in-out
	// animation: turn 2s ease-in-out 1 forwards
	&:focus
		outline: 0
	&:hover
		background-color: $green
		color: #fff
		outline: 0
	&:active
		font-size: 24px
		outline: 0
	&.clicked
		color: transparent
		background-color: transparent
		width: 60px
		border-width: 5px
		border-color: #ddd
		animation: turn 5s linear
		border-top-color: $green
	&.done, &.done:hover
		background-color: $green
		color: #fff
		font-family: 'FontAwesome'
		font-size: 40px
		position: relative
	
			
			
	
@keyframes turn
	10%
		transform: rotateZ(0deg)
	55%
		transform: rotatez(360deg)
	99%
		transform: rotateZ(720deg)
		background-color: transparent
		border-color: #ddd
		border-top-color: $green
	100%
		border-color: $green
		background-color: $green


$red: #FC4236

input[role="delete"]
	border: 2px solid $red
	background-color: transparent
	height: 60px
	line-height: 20px
	color: $red
	padding: 0
	width: 200px
	text-align: center
	border-radius: 200px
	font-size: 20px
	transition: all 200ms ease-in-out
	// animation: turn 2s ease-in-out 1 forwards
	&:focus
		outline: 0
	&:hover
		background-color: $red
		color: #fff
		outline: 0
	&:active
		font-size: 24px
		outline: 0
	&.clicked
		color: transparent
		background-color: transparent
		width: 60px
		border-width: 5px
		border-color: #ddd
		animation: turn-del 5s linear
		border-top-color: $red
	&.done, &.done:hover
		background-color: $red
		color: #fff
		font-family: 'FontAwesome'
		font-size: 40px
		position: relative
	
			
			
	
@keyframes turn-del
	10%
		transform: rotateZ(0deg)
	55%
		transform: rotatez(360deg)
	99%
		transform: rotateZ(720deg)
		background-color: transparent
		border-color: #ddd
		border-top-color: $red
	100%
		border-color: $red
		background-color: $red

$send: #4388FF

input[role="send"]
	border: 2px solid $send
	background-color: transparent
	height: 60px
	line-height: 20px
	color: $send
	padding: 0
	width: 200px
	text-align: center
	border-radius: 200px
	font-size: 20px
	transition: all 200ms ease-in-out
	// animation: turn 2s ease-in-out 1 forwards
	&:focus
		outline: 0
	&:hover
		background-color: $send
		color: #fff
		outline: 0
	&:active
		font-size: 24px
		outline: 0
	&.clicked
		color: transparent
		background-color: transparent
		width: 60px
		border-width: 5px
		border-color: #ddd
		animation: turn-send 5s linear
		border-top-color: $send
	&.done, &.done:hover
		background-color: $send
		color: #fff
		font-family: 'FontAwesome'
		font-size: 40px
		position: relative
	
			
			
	
@keyframes turn-send
	10%
		transform: rotateZ(0deg)
	55%
		transform: rotatez(360deg)
	99%
		transform: rotateZ(720deg)
		background-color: transparent
		border-color: #ddd
		border-top-color: $send
	100%
		border-color: $send
		background-color: $send
View Compiled
$('input[role="submit"]').click(function () {
	var $t = $(this);
	var hasClass = $t.hasClass('done');
	if (!hasClass){
		$(this).addClass('clicked');
		setTimeout(function(){
			$t.removeClass('clicked').addClass('done').attr({
				value: '',
			});
		}, time()); 
	} else if (hasClass){
		$t.removeClass().attr({
			value: 'Submit',
		})
	}
});

$('input[role="delete"]').click(function () {
	var $t = $(this);
	var hasClass = $t.hasClass('done');
	if (!hasClass){
		$(this).addClass('clicked');
		setTimeout(function(){
			$t.removeClass('clicked').addClass('done').attr({
				value: '',
			});
		}, time()); 
	} else if (hasClass){
		$t.removeClass().attr({
			value: 'Delete',
		})
	}
});

$('input[role="send"]').click(function () {
	var $t = $(this);
	var hasClass = $t.hasClass('done');
	if (!hasClass){
		$(this).addClass('clicked');
		setTimeout(function(){
			$t.removeClass('clicked').addClass('done').attr({
				value: '',
			});
		}, time()); 
	} else if (hasClass){
		$t.removeClass().attr({
			value: 'Send',
		});
	}
});

function time() {
	return 3000 + Math.random() * 2000
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js