Pure CSS - File icons with nice hover animation

index.html

<h1>Pure CSS - file icons</h1>
<h2>with nice hover animation</h2>
<div class="icons">
  <div class="icon icon--doc"><i title="doc"></i></div>
  <div class="icon icon--pdf"><i title="pdf"></i></div>
  <div class="icon icon--sheets"><i title="xlsx"></i></div>
  <div class="icon icon--slides"><i title="ppt"></i></div>
  <div class="icon icon--code"><i title="xml"></i></div>
</div>

pure-css-file-icons-with-nice-hover-animation.markdown

Pure CSS - File icons with nice hover animation

File icons combined with pure CSS and some unicode symbols which appear on hover with simple transform and opacity transitions.

A Pen by Aleksandar Čugurović on CodePen.

License.

style.scss

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

// Variables
$white: #fff;
$sheets: #0f9d58;
$pdf: #db4437;
$doc: #4285f4;
$slides: #f5b707;
$code: #00a78e;

// Mixins
@mixin center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

body {
	background-color: $white;
	font-smoothing: antialiased;
	height: 100vh;
	font-family: 'Open Sans', sans-serif;
}

h1 {
	font-size: 50px;
	text-align: center;
	font-weight: 300;
	color: #777;
  margin-bottom: 0;
}

h2 {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 16px;
  color: #bbb;
}

.icons {
	font-size: 0;
	@include center;
}

.icon {
	display: inline-block;
	width: 40px;
	height: 50px;
	border-radius: 2px;
	cursor: pointer;
	position: relative;
	margin: 0 5px;

	&::after {
		content: '';
		position: absolute;
		display: block;
		top: 0;
		right: 0;
		width: 0;
		height: 0;
		border-radius: 0 2px;
		transition: all 0.2s linear;
		backface-visibility: hidden;
	}

	&--doc {
		background-color: $doc;

		&::after {
			background: linear-gradient(45deg, lighten($doc, 15%) 50%, $white 50%);
		}

		i {
			&::before {
				content: '☰';
			}
		}
	}

	&--pdf {
		background-color: $pdf;

		&::after {
			background: linear-gradient(45deg, lighten($pdf, 15%) 50%, $white 50%);
		}

		i {
			&::before {
				content: '☵';
			}
		}
	}

	&--sheets {
		background-color: $sheets;

		&::after {
			background: linear-gradient(45deg, lighten($sheets, 15%) 50%, $white 50%);
		}

		i {
			&::before {
				content: '⊟';
			}
		}
	}

	&--slides {
		background-color: $slides;

		&::after {
			background: linear-gradient(45deg, lighten($slides, 15%) 50%, $white 50%);
		}

		i {
			&::before {
				content: '⧉';
			}
		}
	}

	&--code {
		background-color: $code;

		&::after {
			background: linear-gradient(45deg, lighten($code, 15%) 50%, $white 50%);
		}

		i {
			&::before {
				content: '< >';
			}
		}
	}

	i {
		@include center;
		display: block;
		font-size: 10px;
		color: $white;
		font-weight: 500;

		&::before,
		&::after {
			display: block;
			transition: all 0.2s linear;
		}

		&::before {
			text-align: center;
			font-size: 12px;
			opacity: 0;
			transform: translateY(5px);
		}

		&::after {
			content: attr(title);
			transform: translateY(-5px);

		}
	}

	&:hover {
		border-radius: 2px 4px 2px 2px;

		&::after {
			width: 12px;
			height: 12px;
		}

		i {
			&::before {
				transform: translateY(0);
				opacity: 1;
			}

			&::after {
				transform: translateY(0);
			}
		}
	}
}