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.

From our sponsor: Supercharge your marketing across design, automations, analytics, and more, using our marketing smarts.

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


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.

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

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

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

  4. Very nice!

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

    position: absolute;gi

    Thanks 🙂

  5. 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!

  6. 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! 🙂

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

  8. 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?