Inspiration for Text Styles and Hover Effects

From our sponsor: Market smarter with Mailchimp's automated messaging tools.

When it comes to tiny animations and effects on text, be it a link, a typographic logo or an introductory sentence, there’s really no limit to the creative possibilities. So today we’d like to share a couple of text styles and hover effects with you to get your creative juices flowing. We hope you enjoy them and find them inspiring!

We’ve laid them out in “fullscreen” using a big font size so that you can see the effects in detail.

If you enjoy this you might also like our Creative Link Effects which has some more inspiration especially for menu-type links.

We are using a couple of different techniques, including SVG masks and an inverted text masking technique introduced by Yoksel together with a canvas effect. The canvas script for the cool “jolt” effect is by Tiffany Rayside.
All of the effects make heavy use of the pseudo-classes ::before and ::after.

Let’s have a look at one of the effects, “Kukuri”:

The markup for this effect is simply a link with a data attribute:

<a class="link link--kukuri" href="#" data-letters="Kukuri">Kukuri</a>

The common styles for all link effects are as follows:

.link {
	outline: none;
	text-decoration: none;
	position: relative;
	font-size: 8em;
	line-height: 1;
	color: #9e9ba4;
	display: inline-block;
}

If you have a look at the Kukuri effect, you will see that, on hover, a bar appears by sliding in from the left. This bar will “drag” along the colored version of the text which we pack into the ::before pseudo element. We set the initial position of the bar to be outside of the link box which we set to overflow: hidden.

The other pseudo element that contains the text copy will animate it’s width and because the text inside is set not to wrap, we create a “reveal”-like effect. This transition will happen after a delay, so that we first see the bar passing through. The timing function used for the bar adds some jazz:

.link--kukuri {
	text-transform: uppercase;
	font-weight: 900;
	overflow: hidden;
	line-height: 0.75;
	color: #b2b0a9;
}

.link--kukuri:hover {
	color: #b2b0a9;
}

.link--kukuri::after {
	content: '';
	position: absolute;gi
	height: 16px;
	width: 100%;
	top: 50%;
	margin-top: -8px;
	right: 0;
	background: #F9F9F9;
	transform: translate3d(-100%,0,0);
	transition: transform 0.4s;
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.link--kukuri:hover::after {
	transform: translate3d(100%,0,0);
}

.link--kukuri::before {
	content: attr(data-letters);
	position: absolute;
	z-index: 2;
	overflow: hidden;
	color: #424242;
	white-space: nowrap;
	width: 0%;
	transition: width 0.4s 0.3s;
}

.link--kukuri:hover::before {
	width: 100%;
}

And that’s all the styles for the effect!

We hope you enjoy this little set of styles and find them inspiring!