Text hover effect

index.html

<div>
	<a class="buzz" href="#">Buzz</a>
</div>

script.js

$( document ).ready( function()
{
	$( '.buzz' ).each( function()
	{
		$( this ).attr( 'data-buzz' , $( this ).text() );
	} );
} );

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

html { width:100%; height:100%; }

body
{
	display:table;
	width:100%; height:100%;
	margin:0;
	background:#e6e6e6;
	color:#3d3d3d;
	font-weight:bold;
	font-size:4em;
}

div
{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}

.buzz
{
	display:inline-block;
	position:relative;
	color:inherit;
	text-decoration:none;
	transition:all 250ms ease;
	transform:translatez(0);
	perspective:50px;
}

.buzz:before,
.buzz:after
{
	content:attr( data-buzz );
	position:absolute;
	z-index:-1;
	opacity:0.5;
	transition:all 150ms ease;
}

.buzz:before
{
	color:#00d5ff;
	top:2px; left:2px;
}

.buzz:after
{
	color:#ffaa00;
	bottom:2px; right:2px;
}

.buzz:hover:before
{
	transform:rotatex(-15deg) rotatey(5deg) scale(1.25);
}

.buzz:hover:after
{
	transform:rotatey(-5deg) rotatex(15deg) scale(1.25);
}

text-hover-effect.markdown

Text hover effect

Just playing around with a text hover effect

A Pen by Nick Pearson on CodePen.

License.