Ghost · · 2 min read

Creating The POP Effect: Making Visual Interest For Content Links

Inside I provide CSS you can add to your Ghost blog to make your links have more energy to help draw attention and clicks.

Creating The POP Effect: Making Visual Interest For Content Links
?
Affiliate DisclaimerThis page contains affiliate links. My content is supported by readers like you. So if you buy after clicking on a link, I get a commission without costing you extra. ?

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.

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

Read next

We Thrive On Visitors Just Like You - Donate Today

He Knows SEO is a membership based site with chosen content published for free. If you can't become a member today if the content helps you resolve an issue please donate below to help us keep growing!