CodePen Embed - Alignment Buttons


<section class="item item-1">
    <div class="wrap">
        <div class="align align__left align-active">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="align align__center">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="align align__right">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="align align__justify">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="align align-bar">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</section>

<section class="item item-2">
    <div class="wrap">
        <div class="align align-compound">
            <img src="https://alikinvv.github.io/alignment-buttons/build/img/i1.svg" alt="">
        </div>
        <div class="align align-top">
            <img src="https://alikinvv.github.io/alignment-buttons/build/img/i2.svg" alt="">
        </div>
        <div class="align align-cross">
            <img src="https://alikinvv.github.io/alignment-buttons/build/img/i3.svg" alt="">
        </div>
        <div class="align align-exception">
            <img src="https://alikinvv.github.io/alignment-buttons/build/img/i4.svg" alt="">
        </div>
    </div>
</section>

<section class="item item-3">
    <div class="wrap">
        <div class="align align-left active">
            <span class="line line-1"></span>
            <span class="line line-2"></span>
            <span class="square square-1"></span>
            <span class="square square-2"></span>
        </div>
        <div class="align align-center">
            <span class="line line-1"></span>
            <span class="line line-2"></span>
            <span class="square square-1"></span>
            <span class="square square-2"></span>
        </div>
        <div class="align align-right">
            <span class="line line-1"></span>
            <span class="line line-2"></span>
            <span class="square square-1"></span>
            <span class="square square-2"></span>
        </div>
        <div class="align align-bar">
                <span class="line line-1"></span>
                <span class="line line-2"></span>
                <span class="square square-1"></span>
                <span class="square square-2"></span>
            </div>
    </div>
</section>

<!-- github  -->
<a href="https://github.com/alikinvv/alignment-buttons" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style></a>

@charset "UTF-8";

html, body {
	height: 100%;
	font-family: 'Lato', sans-serif;
}

.item {
	width: 50%;
	height: 75%;
	display: flex;
	justify-content: center;
	align-items: center;
	float: left;
	position: relative;
	&:before {
		font-weight: bold;
		font-size: 35px;
		position: absolute;
		right: 25px;
		top: 15px;
		color: #333;
	}
}


// FOR #1

.item-1 {
	background: #F0F0F0;
	&:before {content: '#1'}
	.wrap {
		background: #fff;
		border-radius: 20px;
		padding: 30px 37px;
		display: inline-block;
		position: relative;
		box-shadow: 0px 20px 61px -14px rgba(0,0,0,0.2);
	}
	.align {
		display: inline-block;
		margin-right: 35px;	
		cursor: pointer;
		span {
			background: #E1E1E1;
			display: block;
			margin-bottom: 6px;
			width: 27px;
			height: 4px;
			border-radius: 10px;
			&:last-child {margin-bottom: 0;}
		}	
		&__left span:last-child {
			width: 12px;
			float: left;
		}
		&__center span:last-child {
			width: 13px;
			position: relative;
			left: 50%;
			transform: translateX(-50%);
		}
		&__right span:last-child {
			width: 13px;
			float: right;
		}
		&__justify {margin-right: 0;}
		&-bar {
			position: absolute;
			top: 30px;
			left: 0;
			width: 100%;
			opacity: 0;
			margin-right: 0;
			pointer-events: none;
			span {background: #383838;}
		}
	}
}

// FOR #2

.item-2 {
	background: #D7DDE9;
	&:before {content: '#2'}
	.wrap {
		background: #fff;
		border-radius: 20px;
		padding: 22px 37px;
		display: inline-block;
		position: relative;
		box-shadow: 0px 20px 61px -14px rgba(0,0,0,0.2);
	}
	.align {
		background: #D7DDE9;
		width: 40px;
		height: 40px;
		display: inline-block;
		margin: 0 15px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		img {
			position: relative;
			z-index: 2;
		}
		&::before {
			content: '';
			display: block;
			position: absolute;
			background: #14D96A;
			z-index: 1;
			transition: all .3s ease-in-out;
		}
		&-compound {
			&:before {
				top: 50%;
				left: 50%;
				transform:translate(-50%,-50%);
				width: 0;
				height: 0;				
			}
			&.active:before {
				width: 100%;
				height: 100%;
			}
		}
		&-top {
			&:before {
				top: 0;
				left: 0;
				width: 0;
				height: 100%;
			}
			&.active:before {width: 100%;}
		}
		&-cross {
			&:before {
				top: 50%;
				left: 50%;
				transform:translate(-50%,-50%);
				width: 0;
				height: 0;
				border-radius: 50%;
			}
			&.active:before {
				width: 150%;
				height: 150%;
			}
		}
		&-exception {
			&:before {
				top: 0;
				left: 0;
				width: 100%;
				height: 0;
			}
			&.active:before {height: 100%;}
		}
	}
}

// FOR #3
.item-3 {
	width: 100%;
	background: #E2EAF4;
	&:before {content: '#3'}
	.wrap {
		background: #fff;
		border-radius: 20px;
		padding: 27px 35px;
		width: 228px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		box-shadow: 0px 20px 61px -14px rgba(0,0,0,0.2);
	}
	.align {
		display: inline-block;
		position: relative;
		width: 40px;
		height: 30px;
		cursor: pointer;
		span {
			background: #BFCCD7;
			display: inline-block;
			position: absolute;
			top: 0;
			left: 0;
		}
		.line {
			width: 2px;
			height: 30px;
		}
		.square {
			width: 8px;
			height: 20px;
			top: 50%;
			transform: translateY(-50%);
			&-2 {height: 12px;}
		}
		&-left {
			.line-2 {left: 14px;}
			.square-2 {left: 14px;}
		}
		&-center {	
			left: 4px;
			.line-1 {left: 3px;}
			.square-1 {left: 0px;}
			.line-2 {left: 17px;}
			.square-2 {left: 14px;}
		}
		&-right {
			.line-1 {left: 13px;}
			.square-1 {left: 7px;}
			.line-2 {left: 27px;}
			.square-2 {left: 21px;}
		}
		&-bar {
			position: absolute;
			top: 27px;
			left: 35px;
			width: 100%;
			opacity: 0;
			margin-right: 0;
			pointer-events: none;
			margin: 0;
			span {background: #1C8BFD;}
		}
	}
}

View Compiled


$(document).ready(function(){
	    // FOR #1

    var tl = new TimelineMax();
    var trigger = true;
    $('.item-1 .align-bar span').css('transform', 'translateX(' + $('.item-1 .align__left').position().left + 'px');
    $('.item-1 .align-bar').css('opacity', 1);
    $('.item-1 .align-bar span:last-child').css('width', $('.item-1 .align__left span:last-child').width()).css('opacity', 1);

    $('.item-1 .align').click(function() {
        var left = $(this).position().left,
            bar = $(this).find('span:last-child').width(),
            barLeft = $(this).find('span:last-child').position().left;

        trigger = false;
        if(!trigger) {
            tl.to('.item-1 .align-bar span:nth-child(1)', 0.4, {x: left, ease: Back.easeOut.config(1.3)})
            .to('.item-1 .align-bar span:nth-child(2)', 0.4, {x: left, ease: Back.easeOut.config(1.3)}, '-=0.35')
            .to('.item-1 .align-bar span:nth-child(3)', 0.4, {x: barLeft, width: bar, ease: Back.easeOut.config(1.3)}, '-=0.35')
            trigger = true;
        }
        
    });

    // FOR #2

    $('.item-2 .align').click(function() {
        $('.item-2 .align').removeClass('active');
        $(this).addClass('active');
    });
	
	// FOR #3
    $('.item-3 .align-bar').css('opacity', 1);
    $('.item-3 .align-bar span.line-1').css('left', $('.item-3 .align.active span.line-1').position().left);
    $('.item-3 .align-bar span.line-2').css('left', $('.item-3 .align.active span.line-2').position().left);
    $('.item-3 .align-bar span.square-1').css('left', $('.item-3 .align.active span.square-1').position().left);
    $('.item-3 .align-bar span.square-2').css('left', $('.item-3 .align.active span.square-2').position().left);

    $('.item-3 .align').click(function() {
        $('.item-3 .align-bar span.line-1').animate({
            left: $(this).find('span.line-1').position().left
        });
        $('.item-3 .align-bar span.line-2').animate({
            left: $(this).find('span.line-2').position().left
        });
        $('.item-3 .align-bar span.square-1').animate({
            left: $(this).find('span.square-1').position().left
        });
        $('.item-3 .align-bar span.square-2').animate({
            left: $(this).find('span.square-2').position().left
        });

        $('.item-3 .align-bar').animate({
            left: $(this).position().left
        });
    });
});

This Pen is owned by Valery Alikin on CodePen.

See more by @AlikinVV on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript