Button Concept

Button-Concept.markdown

Button Concept

A cool little CSS button

A Pen by Chris Deacy on CodePen.

License.

index.html

<a class="button" href="#" role="button">
	<span>remove</span>
	<div class="icon">
		<i class="fa fa-remove"></i>
		<i class="fa fa-check"></i>
	</div>
</a>

script.coffee

removeSuccess = ->
	$('.button').removeClass 'success'

$(document).ready ->
	$('.button').click ->
		$(@).addClass 'success'
		setTimeout removeSuccess, 3000

style.scss

$color: #c0392b;
$color-dark: #a53125;
$speed: "0.25s";
$transition: all #{$speed} cubic-bezier(0.310, -0.105, 0.430, 1.400);

* {
	margin: 0;
	padding: 0;
	box-sizing: inherit;

	&:focus {
		outline: none;
	}
}

html {
	box-sizing: border-box;
}

body {
	background-color: #ecf0f1;
	font-family: 'Open Sans', sans-serif;
}

.button {
	display: block;
	background-color: $color;
	width: 300px;
	height: 100px;
	line-height: 100px;
	margin: auto;
	color: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	cursor: pointer;
	overflow: hidden;
	border-radius: 5px;
	box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
	transition: $transition;
	
	span,
	.icon {
		display: block;
		height: 100%;
		text-align: center;
		position: absolute;
		top: 0;
	}
	
	span {
		width: 72%;
		font-size: 22px;
		text-transform: uppercase;
		left: 0;
		transition: $transition;
		
		&:after {
			content: '';
			background-color: $color-dark;
			width: 2px;
			height: 70%;
			position: absolute;
			top: 15%;
			right: -1px;
		}
	}
	
	.icon {
		width: 28%;
		right: 0;
		transition: $transition;
		
		.fa {
			font-size: 30px;
			vertical-align: middle;
			transition: $transition, height #{$speed} ease;
		}
		
		.fa-remove {
			height: 36px;
		}
		
		.fa-check {
			display: none;
		}
	}
	
	&.success,
	&:hover {
		
		span {
			left: -72%;
			opacity: 0;
		}
		
		.icon {
			width: 100%;
			
			.fa {
				font-size: 45px;
			}
		}
	}
	
	&.success {
		background-color: #27ae60;
		
		.icon {
			
			.fa-remove {
				display: none;
			}
			
			.fa-check {
				display: inline-block;
			}
		}
	}
	
	&:hover {
		opacity: .9;
		
		.icon .fa-remove {
			height: 46px;
		}
	}
	
	&:active {
		opacity: 1;
	}
}