Animated Social Buttons

animated-social-buttons.markdown

Animated Social Buttons

A Pen by Alessandro D'Souza on CodePen.

License.

index.html

<div class="container">
	<ul class="social">
		<li>
			<a href="#" class="social__button">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<i class="fab fa-facebook-f"></i>
			</a>
		</li>
		<li>
			<a href="#" class="social__button">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<i class="fab fa-linkedin-in"></i>
			</a>
		</li>
		<li>
			<a href="#" class="social__button">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<i class="fab fa-instagram"></i>
			</a>
		</li>
		<li>
			<a href="#" class="social__button">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<i class="fas fa-envelope"></i>
			</a>
		</li>
		<li>
			<a href="#" class="social__button">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<i class="fab fa-twitter"></i>
			</a>
		</li>
	</ul>
</div>

style.scss

html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}
body {
	font-size: 24px;
	background: #262626;
}
.container {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.social {
	list-style-type: none;
	display: flex;
	justify-content: center;
	align-items: center;
}
.social__button {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #FFFFFF;
	margin: 0 1rem;
	height: 5rem;
	width: 5rem;
	overflow: hidden;
	transition: all .2s ease;
	outline: 0;
	
	&:hover {
		span {
			&:nth-child(1) {
				transform: scaleX(0);
				transform-origin: left;
				transition: transform .2s ease;
			}
			&:nth-child(3) {
				transform: scaleX(0);
				transform-origin: right;
				transition: transform .2s ease;
			}
			&:nth-child(2) {
				transform: scaleY(1);
				transform-origin: top;
				transition: transform .2s ease;
			}
			&:nth-child(4) {
				transform: scaleY(1);
				transform-origin: bottom;
				transition: transform .2s ease;
			}
		}
	}
	
	span {
		background: #FFFFFF;
		position: absolute;
		transition: transform .2s ease;
		
		&:nth-child(1),
		&:nth-child(3) {
			width: 100%;
			height: 2px;
		}
		&:nth-child(1) {
			top: 0;
			left: 0;
			transform: scaleX(1);
			transform-origin: right;
		}
		&:nth-child(3) {
			bottom: 0;
			left: 0;
			transform: scaleX(1);
			transform-origin: left;
		}
		&:nth-child(2),
		&:nth-child(4) {
			height: 100%;
			width: 2px;
		}
		&:nth-child(2) {
			top: 0;
			left: 0;
			transform: scaleY(0);
			transform-origin: bottom;
		}
		&:nth-child(4) {
			top: 0;
			right: 0;
			transform: scaleY(0);
			transform-origin: top;
		}
	}
}

styles

<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet" />