button 
	span.txt More details
	span.icn.plus

$color: #3DB74E

html, body
	width: 100vw
	height: 100vh
	margin: 0
	padding: 0
	display: flex


button
	margin: auto
	position: relative
	display: block
	font-weight: 100
	background: #ffffff 
	border: 1px solid rgba($color, 1)
	text-decoration: none
	color: $color
	padding: 15px 20px
	transition: .225s ease all
	overflow: hidden
	will-change: transform
	box-shadow: 3px 3px 0px rgba($color, 0.5)
	display: flex
	flex-flow: row-reverse wrap
	align-content: center
	.icn
		display: inline-block
		width: 16px
		height: 16px
		margin-right: 16px
		position: relative		
		&:before
			content: ''
			display: inline-block
			background: rgba(black, 0.9)
			width: 1px
			height: 120%
			position: absolute
			top: -10%
			left: 50%
			transition: .5s cubic-bezier(0.775, 0.010, 0.220, 0.985) transform, .225s ease background
		&:after
			content: ''
			display: inline-block
			background: rgba(black, 0.9)
			width: 1px
			height: 120%
			position: absolute
			top: -10%
			left: 50%
			transform: rotate(90deg)
			transition: .5s cubic-bezier(0.775, 0.010, 0.220, 0.985) transform, .225s ease background
		&.minus
			&:after, 
			&:before
				transform: rotate(270deg)
			

	&:after
		content: ''
		display: block
		position: absolute
		top: -50%
		left: -50%
		width: 200%
		height: 200%
		background-color: $color
		z-index: -1
		transition: .5s top cubic-bezier(0.000, 1.015, 1.000, 0.980), .5s ease transform
		will-change: transform
		transform-origin: top center
		transform: translateY(-100%) rotate(-10deg)

	&:hover, &:focus
		cursor: pointer
		box-shadow: 3px 3px 0px rgba($color, 0.3)
		color: white
		&:after
			transform: translateY(-100%) rotate(10deg)
			top: 150%
		.icn
			&:before,&:after
				background: white

	&.clicked
		cursor: pointer
		transform: translate(3px, 3px) !important
		box-shadow: 0px 0px 0px rgba($color, 1) !important
		border: 1px solid rgba($color, 0.5)

console.clear();

$("button").on("touchstart mousedown", function () {
	$(this).addClass("clicked");
});

$("button").on("touchend mouseup", function () {
	$(this).removeClass("clicked");
	$(this).blur();
});

$("button").on("click touch", function () {
	$(this).find(".icn").toggleClass("minus");
	$(this)
		.find(".txt")
		.text(
			$(this).find(".icn").hasClass("minus") == true
				? "Less details"
				: "More details"
		);
});