Creating The POP Effect: Making Visual Interest For Content Links

Most links in content are focused on just the blue underline and text color, while this definitely makes them appear different it has no action or pull to make you want to click them.

This adjustment is seen on many more blogs today than it used to be done on, the below code is for the Flair theme I run on this site, so you can easily add this into the header code injection and I know it will work.

If you try it and it doesnt work on another theme you can always join as a member, leave a comment on the post, and I will work on how to apply it on the theme you run.

Link Bling CSS

.prose p>a, ul>a, ol>a, li>a {
    color: inherit;
    text-decoration: none;
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--ghost-accent-color)), to(var(--ghost-accent-color)));
    background-image: linear-gradient(to bottom, var(--ghost-accent-color) 0%, var(--ghost-accent-color) 100%);
    background-repeat: no-repeat;
    background-size: 100% 00%;
    background-position: 0 111%;
    -webkit-transition: background-size .25s ease-in;
    transition: background-size .25s ease-in;
    padding-left: 2px;
    padding-right: 2px;
    border-bottom: 2px solid var(--ghost-accent-color);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.prose p>a:hover,.prose ul>a:hover,.prose ol>a:hover,.prose li>a:hover {
    background-size: 100% 100%;
    color: #ffffff!important;
}

If you have applied the shimmer code (as I have) for buttons, then you can jazz up the links with the shimmer effect also by adjusting the code below.

Link Bling With Shimmer CSS