Inspiration for Inline Anchor Styles

Some inspiration for creative and modern inline anchor styles and hover effects using different techniques like pseudo-element transitions and SVGs.

InlineLinkStyles

View demo Download source

Today we have some more inspiration for you! This time we’ve thought about some creative and modern styles for inline anchors, i.e. links that are in the text flow. These anchors are somewhat restricted because they are surrounded by other text, and so we can’t just apply any kind of layout or effect to them due to their limited surrounding space. But there are some interesting things we can do to them and you’ve surely spotted already some of these around the web. We thought we’d give you some more inspiration of hover styles and effects, mostly involving pseudo-elements trickery and also some SVG magic (last two styles).

Please note that this is for your inspiration, so make sure to view it with a state-of-the-art browsers. Some browsers don’t support transitions on pseudo-elements.

Sadly, Firefox does strange things to text when it’s transitioned (especially when using scale), so you might see some flickering there. IE11 also does not seem to know how to translate an element using calc, so one of the effects will be shown wrongly.

For most of the styles, we just use a normal anchor and then we do something to its pseudo-elements ::before and ::after. Some of the anchors also need a data attribute and some include a SVG.

For achieving the desired stacking of the anchors and their pseudo-elements, we need to set some general styles:

section {
	position: relative;
	z-index: 1; /* needed for setting pseudo-element z-index */
	backface-visibility: hidden;
}

section a {
	outline: none;
	color: #404d5b;
	text-decoration: none;
	white-space: nowrap;
	position: relative;
	display: inline-block;
	vertical-align: bottom;
}

section a::before,
section a::after {
	pointer-events: none;
	backface-visibility: hidden;
}

Setting the anchor that we want to style, to inline-block allows us to treat it like a block element while still maintaining it in the flow of text.

An example for a style is the following 3D flip effect:

.link-flip a {
	font-weight: 500;
	perspective: 600px;
	perspective-origin: 50% 100%;
	transition: color 0.3s;
}

.link-flip a:hover,
.link-flip a:focus {
	color: #e74c3c;
}

.link-flip a::before,
.link-flip a::after {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: -4px;
	z-index: -1;
	box-sizing: content-box;
	padding: 0 4px;
	content: '';
}

.link-flip a::before {
	background-color: #fff;
	transition: transform 0.2s;
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transform: rotateX(90deg);
	transform-origin: 50% 100%;
}

.link-flip a:hover::before,
.link-flip a:focus::before {
	transform: rotateX(0deg);
}

.link-flip a::after {
	border-bottom: 2px solid #fff;
}

We use the anchor itself as a perspective wrapper and apply a 3D rotation to the ::before pseudo-element. Initially it’s rotated 90 degrees (so that it’s invisible) and when we hover, we rotated it back so that we can see it. The ::after pseudo-element is used to simulate the lateral down side of the rotated pseudo-element.

We hope you enjoy these little styles and find them inspiring!

Credits: Arrow icon arrow_right.svg by P.J. Onori licensed under CC BY-NC 3.0 NL. Link icon from the Feather icon set by Cole Bemis licensed under CC BY 3.0.

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

Feedback 21

  1. 7

    I love the SVG line and marker animations, will try something similar in the redesign of my website.

  2. 9

    I’m always impressed by your demos, but I might make a few changes to this one. Tapping the links on my iPhone causes the page to immediately jump to the top, and I miss the link styling and animations entirely.

  3. 12

    I’m not getting great perfoamnce here on my Android tablet, but but 2 thumbs up for the addition of ‘white-space: nowrap’ so multi word anchors don’t give weird effects if they span 2 lines.

  4. 14

    Aside from the nifty 3D flip effect, there is really cool typography inspiration here. Raleway is a beautiful font – thanks for sharing this Mary.

  5. 15

    Awesome job as usual. I have learned so much from your tutorials.
    Your site is so helpful and inspiring. Thanks and please, keep them coming.

  6. 17

    Great and inspiring. I’m always looking for amazing designs, designs that help me improve my skills and imagination. There’s always good work on this site. Thank you.

  7. 19

    i will definatly try it in my website hope this will not have nagative effect on seo :)

  8. 20

    awesome work.

    i am noob, i want to use one of the style as default table link style in my blog, for ex. i have created a table and i want every link in the table should use one of above style.

    someone please help me how can i do this??

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>