SCI-FI UI #1 - WAVING SQUARE BUTTON

index.pug

-var x = 1
-var sqr = 174

#shot
	.card
		button#component
			span.label
			while x <= sqr
				div(class="sqr sqr-" + x++)
	.description
		h1
			| waving square button
		p
			| Mouse over the white button to unlock it
	.title
	.options
		p
			| Type of transition
		.btns
			each val, index in ['following', 'row', 'line', 'diagonal', 'radial', 'disintegration']
				button(id='btn-'+index onclick="setAnim(this)")= val
		p
			| Aurelien Grimaud, <a href='https://twitter.com/inVoltag' target='_blank'>@inVoltag</a>

sci-fi-ui-1-waving-square-button.markdown

SCI-FI UI #1 - WAVING SQUARE BUTTON

Particles experiments in order to explore several moves only in CSS. Feel free to add your own!

A Pen by vineeth on CodePen.

License.

script.js

function addClass(component, className) {
	var e = document.getElementById(component);
	e.removeAttribute('class');
	e.classList.add(className);
};

function setAnim(e) {
	var btn = document.getElementsByTagName('button')
	for (i = 0; i < btn.length; i++) {
		btn[i].classList.remove('active');
	}
	e.classList.toggle('active');
	value = e.innerText;
	addClass('component', value);
}

// first transition by default
var btn = document.getElementsByTagName('button')
btn[1].classList.add('active')
value = btn[1].innerText;
addClass('component', value);

style.scss

// colors
$onyx: #111;
$white: #fff;
$ketchup-mayo: #f5d546;
$leather: #4f4c4d;
$light-azur: #C7E3F9;
$tomato: #d64444;

// squares
$sqr: 174;
$row: 29;
$line: 6;

// speed
$speed: 300ms;
$delay: 2000ms;

// basis
button#component {
	width: 290px;
	height: 60px;
	border: none;
	display: flex;
	background: transparent;
	margin: auto;
	padding: 0;
	position: relative;
	flex-wrap: wrap;
	cursor: pointer;
	font-family: 'Barlow', sans-serif;
	
	&:focus {
		outline: none;
	}
		
	.sqr {
		width: 10px;
		height: 10px;
		background-color: $white;
		transform-origin: 50% 50%;
		transition-property: all;
		transition-timing-function: ease-out;
		transition-duration: $speed;
		transition-delay: $delay;
	}

	.label {
		width: 100%;
		height: 100%;
		display: flex;
		position: absolute;
		top: 0;
		left: 0;
		font-weight: 600;
		font-size: 18px;
		text-align: center;
		letter-spacing: 5px;

		&::before {
			content: 'LOCKED';
			margin: auto;
			transition: $speed ease-out all $delay;
		}
	}
}

// hover event
button#component:hover {
	animation: blinking $delay ease-in 1;
	
	.sqr {
		transform: scale(.1)		
	}
	
	// colored squares
	$i: $sqr;
	@while $i > 0 {
		& {
			.sqr-#{$i} { background-color: $light-azur }
		}
		$i: $i - 5
	}
	
	$j: $sqr - 1;
	@while $j > 0 {
		& {
			.sqr-#{$j} { background-color: $ketchup-mayo }
		}
		$j: $j - 2
	}
	
	$k: $sqr - 4;
	@while $k > 0 {
		& {
			.sqr-#{$k} { background-color: $tomato }
		}
		$k: $k - 4
	}
	
	.label::before {
		animation: decrypt 400ms $delay linear forwards 1;
		z-index: 2;
		color: $white;
	}
}

// decrypted key
@-webkit-keyframes decrypt {
	@each $value, $code in (0%, 'LOCKED'), (10%, 'YdJZidnejD'), (20%, 'oz9ejdjd'), (30%, 'idnNDeit7'), (40%, 'JEDc83jdE'), (50%, 'JEDEudPe'), (60%, 'EKDOdreif'), (70%, 'fkzeef9e'), (80%, 'fie73Rnf0'), (90%, 'iedi9OE'), (100%, 'UNLOCKED') {
		#{$value} {content: $code};
	}
}

// blinking button
@-webkit-keyframes blinking {
	from, to, 50% { opacity: 1 }
	25%, 75% { opacity: 0 }
}

// following transition
@for $i from 1 through $sqr {
	#component.following .sqr-#{$i} { transition-delay: $delay + (2ms * $i) }
}

// row transition
@for $i from 0 through $row {
	$r: $sqr + $i;
	@while $r > 0 {
		#component.row .sqr-#{$r} { transition-delay: $delay + (10ms * $i) }
		$r: $r - $row
	}
}

// line transition
@for $i from 0 through $line {
	$l: $sqr;
	@while $l > ($row * $i) {
		#component.line .sqr-#{$l} { transition-delay: $delay+ (50ms * $i) }
		$l: $l - 1
	}
}

// diagonal transition
@for $i from 0 through $row {
	$d: $sqr + $i;
	@while $d > 0 {
		#component.diagonal .sqr-#{$d} { transition-delay: $delay + (10ms * $i) }
		$d: $d - ($row - 5)
	}
}

// radial transition
@mixin arrow($start, $end, $sign) {
	@for $i from $start through $end {
		$half-row: round($row / 2);
		$half-line: round($line / 2);
		$abs: 0;
		@if $i <= $half-line {
			$abs: -(abs($i - $half-line)) + $half-line;
		} @else {
			$abs: -(abs($i - $half-line)) + $half-line + 1;
		}
		$id: ($half-row - ($sign * $abs)) + ($row * $i - $row) + $sign;
		#component.radial .sqr-#{$id} { transition-delay: $delay }
		
		@for $j from $start through $half-row - $abs {
			#component.radial .sqr-#{$id - ($sign * $j)} { transition-delay: $delay + (25ms * $j) }		
		}
	}
} 
@include arrow(0, $line, 1);
@include arrow(0, $line, -1);

// disintegration transition
@for $i from 1 through $sqr {
	#component.disintegration .sqr-#{$i} { transition-delay: $delay + (3ms * $i) }
}
button#component.disintegration:hover .sqr {
	transform: translateY(-20px) rotateY(90deg) scale(.1);
}

// template style
$duration: 400ms;
$shift: 200ms;
$start: 800ms;

body {
	background: lighten($onyx, 5%) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAG0lEQVQYV2P8//+/FCMj4zMGJMCIzIGxKRQEAJgPBAbJqUVTAAAAAElFTkSuQmCC) repeat;
	display: flex;
	height: 100vh;
	font-family: 'Barlow', sans-serif;
	font-size: 14px;
	color: $white;
	margin: 0;
	padding: 0;
}

h1 {
	background-color: $ketchup-mayo;
	padding: 0 5px 3px 5px;
	color: lighten($onyx,.1);
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 32px;
	letter-spacing: 2px;
	margin: 20px 0 10px;
	border: 1px $ketchup-mayo solid;
	border-radius: 5px;
}

h1, p {
	font-weight: 500;
}

p {
	opacity: .3;
	margin: 0 0 10px 0;
	letter-spacing: 1px;
}

a {
	color: $ketchup-mayo;
	
	&:hover {
		background: $ketchup-mayo;
		color: $onyx;
		text-decoration: none;
	}
}

#shot {
	width: 400px;
	margin: auto;
	position: relative;
	
	.card {
		width: 100%;
		height: 300px;
		display: flex;
		background: linear-gradient(0deg, rgba($ketchup-mayo, .1) 0%, rgba($onyx, 0) 100%);
		border: 1px $ketchup-mayo solid;
		border-radius: 5px;
		animation: entrance $duration $start linear backwards 1;
			
		#component {
			margin: auto;
		}
	}
	
	.description {
		animation: entrance $duration ($start + $shift) linear backwards 1;
	}
	
	.title {
		height: 100%;
		width: 5px;
		position: absolute;
		top: 0;
		left: -50px;
		background: $ketchup-mayo;
		animation: entrance $duration ($start + $shift * 2) linear backwards 1;
		
		&::before {
			@extend p;
			content: 'sci-fi ui #1';
			text-transform: uppercase;
			text-align: right;
			position: absolute;
			left: -90px;
			top: -17px;
			transform-origin: 100% 100%;
			transform: rotateZ(-90deg);
		}
	}
	
	.options {
		width: 200px;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		position: absolute;
		top: 0;
		right: -220px;
		animation: entrance $duration ($start + $shift * 3) linear backwards 1;
		
		button {
			height: 40px;
			padding: 0 10px;
			margin: 0 10px 15px 0;
			border: 2px $onyx solid;
			outline: 1px $ketchup-mayo solid;
			background-color: transparent;
			font-size: 14px;
			letter-spacing: 1px;
			color: $white;
			cursor: pointer;
			transition: 300ms all ease-out;

			&:hover, &:focus, &.active {
				background-color: rgba($ketchup-mayo,.5);	
			}
			
			&.active {
				border: 2px $ketchup-mayo solid;
				background-color: rgba($ketchup-mayo,1);
				color: lighten($onyx,.1)
			}
		}
	}
}

// entrance animation
@-webkit-keyframes entrance {
	to, 20%, 40%, 60%, 80% { opacity: 1 }
	from, 10%, 30%, 50%, 70%, 90% { opacity: 0 }
}