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

From our sponsor: Jamf Now sets up and secures your team's Apple devices so you can get back to more creative work.

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!

Tagged with:

Mary Lou

ML 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.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

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 learning CSS now.

Feedback 45

Comments are closed.
  1. Light and very impressive, thank Mary Lou !

    PS: your github link for this demo is not good.

  2. “The next effects only work in Firefox and Chrome.” And greatly in Safari, since that uses webkit too..

  3. Hey, awesome effects. Thought you should know that Manko is japanese slang for “lady parts” LOLL

  4. I like the “ILIN” effect, can’t seem to find the source code…

  5. I’m tring to change my site inspired by this. can you share an idea here?

  6. Mary Lou, this is a great work! Not only for the greatly enjoiable transitions you thought of but also, maybe unaware you tackled a not yet noticed issue with links for me: the hover effects do highlight the link as a whole, instead I prefer the way this highlights the word itself dragging more atention on the signifiance rather than the link part.

    Thank you!

  7. Wow, really nice! Thanks for sharing!

    PS: the ‘The next effects only work in….’ section also work in Maxthon browser!

  8. Great article, awesome effects.

    probably a stupid question but… are hover effects useful on mobile phones and tablets?