@import url('https://fonts.googleapis.com/css?family=Open+Sans');

:root {
	--color: rgb(0, 205, 103);
}

@keyframes downloadBounce {
	to {
		transform: translateY(0px) rotate(50deg);
	}
}
@keyframes downloadBounce2 {
	to {
		transform: translateY(0px) rotate(-50deg);
	}
}

.download {
	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
	overflow: hidden;
	border-radius: 5px;
	box-sizing: border-box;
	background: var(--color);
	border: 2px solid var(--color);
	color: white;
	padding: 26px 0 26px 28px;
	width: 220px;
	display: inline-block;
	position: relative;
	transition: all 300ms ease;
	margin-right: 20px;
	font-size: 20px !important;
}

.download span {
	display: block;
	position: relative;
	z-index: 1;
	transform: translate(0, 0);
	transition: transform 400ms ease-out 400ms;
}

.download span::after,
.download span::before {
	content: '';
	width: 1px;
	height: 16px;
	background: var(--color);
	opacity: 0;
	position: absolute;
	left: 50%;
	top: 100%;
	transform-origin: center bottom;
	transform: translateY(0) rotate(0deg);
	transition: all 10ms ease-out;
	animation: none;
}

.download svg {
	z-index: 0;
	fill: rgba(255, 255, 255, 1);
	position: absolute;
	left: 20%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(0deg) scale(0.04857);
	transition: all 350ms ease-out;
	height: 700px;
}

.download svg#linux {
	transform: translate(-50%, -50%) rotate(0deg) scale(0.05857);
}

.download:hover {
	padding: 26px 0;
	color: var(--color);
}

.download:hover svg {
	left: 50%;
	transform: translate(-50%, -50%) rotate(60deg) scale(1);
}

.download:hover svg#windows {
	transform: translate(-50%, -10%) rotate(60deg) scale(1);
}

.download:hover svg#linux {
	transform: translate(-120%, -125%) rotate(60deg) scale(6);
}

.download:hover span {
	transform: translate(0, -10px) scale(1.1);
	transition: transform 400ms ease-out 400ms;
}

.download:hover span::after,
.download:hover span::before {
	opacity: 1;
	transition: all 400ms ease-out 400ms, transform 300ms ease-in 100ms;
}

.download:hover span::after {
	transform: translateY(7px) rotate(50deg);
	animation: downloadBounce 800ms linear alternate infinite;
}

.download:hover span::before {
	transform: translateY(7px) rotate(-50deg);
	animation: downloadBounce2 800ms linear alternate infinite;
}