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.

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:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

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

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?

  9. Hi, i think about urpi effect, whith skew line from top left > right bottom,
    Maybe we can use linear-gradient with transition, to make similar effect,
    in other browsers, and .urpi:after {content:’urpi’;position:absolute; …}
    to make text move to right:hover
    I know, i think to much :p

  10. What a great use of the ‘data-letters’ attribute to create the color wipe! So simple yet elegant. Love it.

  11. I really enjoyed this tutorial, I loved the effect, thank you! I follow the site for several years and have learned a lot from the tutorials.

  12. Very nice!

    Curious what this line, in `.link–kukuri::after` is doing, particularly `gi`

    “`
    position: absolute;gi
    “`

    Thanks 🙂

  13. Hey I’m have trouble with when the whole scrolling thing is over, there is almost like a rainbow outline behind my lettering. Do you know what could be causing this? I loved the tutorial btw!

  14. I’ve tested all the fx, but I would like to get the ” NUKUN ” effect to work correctly in IE 11 and Microsoft Edge. Anyone with any solutions for it? anyway really great fx LOVE IT! 🙂

  15. oops i was the last comment and it works now! but the white line doesnt appear..! also i’d love to know how to make the Takiri one!! x

  16. Mary Lou you are absolutely genius. I’ve checked all your effects. Mind blowing and very attractive work… Thanks for sharing it. I got stuck while giving link on yaku effect. I inserted it into my website and gave href link to it but it’s not working. Can you please tell me how to make the link work?

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

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