Jump to content


Fancy Css Links

  • Please log in to reply
No replies to this topic

#1 Alex


    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 11 April 2016 - 11:13 AM

Hey guys, I've noticed a new little trend pop up in the design space and got inspired to recreate it for myself for use on MD sites.


It's a small tweak you can make to the links that show up in your content box. Here's a GIF preview:


Attached File  links-gif.gif   74.09KB   0 downloads


Here's the quick snippet of CSS you can place in your MD Child Theme's style.css file:

.links-main a:not(.button) {
	box-shadow: inset 0 -5px 0 #FFD9D9;
	border-bottom: 0;
	color: #1e1e1e;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;

.links-main a:hover {
	box-shadow: none;

I'm not usually into making links the same color as text, so you may want to tweak the colors around, but I thought I'd share this for those of you interested in design. Let me know what you think!

- Alex
Check out the Kolakube blog or follow me on Twitter.

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users