How to add "no follow" to button link?

Hello

Could someone please be so kind as to tell me how to put

rel="nofollow" on the link on my button.

<p style="text-align: center;">[vc_button title="CLICK HERE TO BUY NOW FOR $99.99" target="_self" color="green" size="size_large2" href="https://www.mydomain.com/secured-booking/m_index.php?id=54"]</p>

It doesn’t work when added to the url above. I don’t know the code to add in css or functions.

Please help thank you!

Sorry I can’t get it to work. Also I don’t understand your instructions why add a class below the code?. I added the tag [vc_button rel="nofollow" title=" and that doesn’t work when viewing source.

Here is my code:

<p style="text-align: center;">[vc_button title="CLICK HERE TO BUY NOW FOR $99.99" target="_self" color="green" size="size_large2" href="https://www.mydomain.com/secured-booking/m_index.php?id=54"]</p>

adding no follow anywhere doesn’t work. Is there a file in the template somewhere that i can change?

File?
Line?
Code?

Thanks so much

@mboydnv

I needed this also, and the example provided in the screenshots above worked first time out.

Basically you’re wrapping a span class for the button in the anchor link, vs using a shortcode for the button. The example does not use the shortcode which I think is where you’re getting hung up here.

Think of it this way, and this is not the explicit example from Lucian’s code, just simpler way of showing what is happening, while *not* using a shortcode. And be sure to do in text editor mode, not visual editor mode as you’re working with plain HTML/CSS.

<a href=""><span button class></span></a>

• This reply was modified 11 years by simchris.

Hello again,

currently I am using the following code at the bottom of a post:

<p style="text-align: center;"><span class="wpb_button wpb_orange wpb_size_large2">BUY NOW for $85.99</span></p>

It is not converting to sales. The button looks too much like a social share button.

How do I add a graphic button of my own making to the css? I would still like to have a text link that says BUY NOW for $85.99 and have the graphic be in background of the link. I understand I will have to noodle with the padding maybe to make sure it is centered correctly.

What file? Any code is always appreciated.

Thank you so much!

I really need to make changes to this button. I’m aware i can get free code for buttons. My question is how do i call it up? For example I just want to make the green button font size bigger..

What would be the correct code to call it up?

Theme Panel/YOUR CUSTOM CSS/

.wpb_size_large2 {
font: bold 50px Sans-Serif;
}

or

.wpb_button {
font-size: 60px;
}

Thanks

I still can’t figure this out. It’s a simple Buy now button at the bottom of the post. I use the above code to make the button. Simple green button. But it’s not converting and I need to juice this up but can’t seem to get the code put in right.

.blog-stack .wpb_button .wpb_green .wpb_size_large2{
font-size: 60px;
}

Nothing works…please help?

Thank you so much, that indeed got me pointed in the right direction. Here’s what I did in case anyone else would like buy now buttons in their posts.

I visited http://www.bestcssbuttongenerator.com/#/n8Rgg1tdWz and created my button.

I named my button BenjiButton. Obviously anyone can name it whatever they like.

I generated the following code using the generator. And then inserted it under Theme Panel/YOUR CUSTOM CSS/

.BenjiButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #fff6af;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fff6af;
	box-shadow:inset 0px 1px 0px 0px #fff6af;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
	background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
	background-color:#ffec64;
	-moz-border-radius:42px;
	-webkit-border-radius:42px;
	border-radius:42px;
	border:1px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-family:arial;
	font-size:25px;
	font-weight:bold;
	padding:10px 37px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffee66;
}
.BenjiButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
	background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
	background-color:#ffab23;
}
.BenjiButton:active {
	position:relative;
	top:1px;
}

In all my posts at the bottom, I inserted the code:

<p style="text-align: center;"><a title="BUY NOW for $85.99" href="http://www.mywebsitedomain.c0m" rel="nofollow"><span class="BenjiButton">BUY NOW for $85.99</span></a></p>

The result is a great button. Thanks for your help.

• This reply was modified 11 years by mboydnv.