Need help for custom html button

Hi there,

what does your HTML and CSS look like? Or can you link me to a page with the HTML button in place.

Hi David

I am trying to make the bottom codes clickable buttons using the code from w3schools:

<ta linkid="898" href="URL">Info</ta>

w3schools.com/howto/howto_css_outline_buttons.asp

The button I have in my website does not look nice, as you can see.

wpzebra.com/generatepress-minimal/

I am also using the ThirstyAffiliates plugin, hence the code </ta>.

The code above is not showing probably when posted here above.

Any help would be appreciated, please note button must be no follow as well when clicked.

regards.

Try this, its how the GP Ghost Button works on generatepress.com

HTML - don't need the button wrapper just this:

<a class="thirstylink button ghost" rel="nofollow" target="_blank" title="generatepress" href="https://wpzebra.com/go/generatepress/"><strong>GeneratePress Free and GP Premium</strong></a>

CSS - change colors accordingly:

.button.ghost, .button.ghost:visited {
    background-color: transparent;
    color: inherit;
    border: 1px solid #000;
}
.button.ghost:hover {
    background-color: #bcd5ec;
    color: #000;
    border-bottom-color: rgba(0,0,0,.2);
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
}

Hi David

You're the best!

I added <center> in front and end like this to center button below, is this right:

<center><a class="thirstylink button ghost" rel="nofollow" target="_blank" title="generatepress" href="https://wpzebra.com/go/generatepress/"><strong>GeneratePress Free and GP Premium</strong></a></center>

I added the "CSS – change colors" to Additional CSS in frontend of theme customizor, is that right?

My concern now is, when you insert an thirstyaffiliate link like this into a paragraph, the code looks like this below:

<p><ta linkid="898" href="http://wpzebra.com/go/generatepress/">generatepress</ta></p>

My question is, the linkid="898" must that also appear in the button code, when someone clicks through a thirstyaffiliate link?

regards.

Hi there,

Where is the linkid supposed to show up? Within the URL itself? It looks like you're using redirects (/go/generatepress), so the linkid would need to be in the destination URL that your URL redirects to.

Hi Tom

Thanks for your reply.

The main reason I am using ThirstyAffiliates wordpress plugin, is to promote a GeneratePress affiliate link. Most Bloggers say it is good practice to cloak all your affiliate links.

My concern now is when I insert a ThirstyAffiliates link like GeneratePress in a paragraph block using Gutenberg, the code editor shows the GeneratePress affiliate link like this below:

<ta href="http://wpzebra.com/go/generatepress/" linkid="151">generatepress</ta>

My question now is, how do I show this link in a button, that is clickable for my readers.

Any help or other suggestions will be highly appreciated.

Is that the exact code they give you? I'm not sure what a <ta> element is?

Hi Tom

The <ta> element stands for ThirstyAffiliates, it only makes sense because the wordpress plugin is called ThirstyAffiliates, I might be wrong, as I am not a html expert. :)

When you add the "nofollow" rule to your affiliate link, they say that Google will then not index that link. So in the future if I decide not use the ThirstyAffiliates plugin for this, and just do it manually, will this be good practice or is it always best to use a cloaking affiliate plugin to do it for you?

I know this is not GeneratePress related, but will really appreciate any help or advice you give regarding this and also totally understand whatever you decide.

best regards.

Is it possible not to use the <ta> element?

It would be better to use a regular link:

<a class="button" href="YOUR LINK HERE">GP</a>

To cloak the link you can use a redirection plugin. So if someone lands on mywebsite.com/go/generatepress, it redirects them to the true link.