Inspiration for Text Styles and Hover Effects

A couple of creative text styles and hover effects for your inspiration. Some effects use experimental techniques including SVG masking and Canvas.

LinkStylesHoverEffects

View demo Download source

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.

Attention: Some of the techniques are very experimental and won’t work in all browsers. So you should view the demo in a modern browser.

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”:

linkstyle

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!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start leanirng CSS now.

Feedback 44

  1. 1

    Very clean and beautiful. Thanks a Billion. But how do I remove the border? I can’t seem to find it. Thanks.

  2. 3

    Hi Mary Lou,

    thanks a lot for those elegant effects! What an excellent piece of work – just like the most of your other ideas! I intend to insert them on a site with a backside menu flip. For some reason the effects don’t disappear when activating the flip. Their backside visibility is – though I fixed it in css – not hidden. Where do I go wrong?

    Best regards
    Eva

Follow this discussion

Leave a Comment