Is there a code to generate button?

`Hi there,

are you using the Block Editor ?

Thanks David,
But I wonder what exactly is the code for generating a button, which I can add "no-follow" to it?
Thanks inadvance

If you're using the Block Editor then you can use the GenerateBlocks plugin - its Buttons block has rel options including no follow.

If you want to add it using HTML then you would write:

<a class="button" rel="nofollow" href="the_link_url">The button text</a>

Hi David,
Thanks soso much! I'd love to use the HTML code for the button~
On top of the html you provided, if I want to:
1. add border radius
2. add button color (using rgb color value)
3. customize the button size (like large, medium, small or other ways that can do it)
How should I write the HTML?
All the best,

Hi there,

All 3 can be done with custom CSS.

The HTML side of things is basically just adding a class attribute.

Example:

<a class="button blue-bg" rel="nofollow" href="the_link_url">The button text</a>

Seeing that this html tag has blue class, if you have this CSS:

.blue-bg {
background-color: blue;
}

The button will have blue background.

or you can do more like this:

<a class="button blue-bg white-text" rel="nofollow" href="the_link_url">The button text</a>

and have this CSS as well:

.white-text {
color: white;
}

With in turn, will make the button have blue background and white text.

Now we can add more class and add more custom CSS for more styling options but it will get tedious so we can just add a unique class and place all the styling in 1 custom CSS like this:

The HTML side
<a class="button custom-styled-button" rel="nofollow" href="the_link_url">The button text</a>

The CSS side:

.custom-styled-button {
color: white;
background-image: linear-gradient(red, yellow);
border-radius: 20px;
padding: 10px;
}

This will style the button w/ a white text color, red+yellow gradient background, 20px border radius and padding of 10 px.

You can modify this to your preference. :D

Hi Elvin,
That's awesome, I do appreciate that! and I'll try to customize it myself.
Big thanks~

No problem. :D

Hi there,
Another 2 questions for CSS code:
1.What is the simple code for centering a button? By default, the button sits at the left.
2.The button seems to disapper in the AMP page mode.What am I supposed to do maintain the button style, like inserting some codes in Custom CSS plugin? Will it work?
Thanks inadvance

1.What is the simple code for centering a button? By default, the button sits at the left.

You can either try centering it with CSS using margin: 0 auto; or width: 100%; text-align: center;

2.The button seems to disapper in the AMP page mode.What am I supposed to do maintain the button style, like inserting some codes in Custom CSS plugin? Will it work?

Can you link us to this page to observe?

Hi Elvin,
Thanks again for your patience.
This is what the button looks like in normal page:
https://snipboard.io/8W0ItY.jpg

and this is what the button looks like in AMP page:
https://snipboard.io/a1rlEt.jpg

AMP is likely messing w/ how you're adding the CSS to the page.

Can you share us how you're adding it?

1. I'm using 'sun-flower' CSS to style the button according to this page:https://docs.generatepress.com/article/adding-buttons/
The code goes like this:

.button.sun-flower,
.button.sun-flower:visited {
background: #F1C40F;
color:#FFF;
}

.button.sun-flower:hover,
.button.sun-flower:active {
background: #E2B607;
color:#FFF;
}

2. Another problem is, I can't get what I want from centering it with CSS using margin: 0 auto; or width: 100%; text-align: center; It seems to only center the TEXT, not button itself. Just let me know if I haven't made myslef clear.

Can you share a link to the AMP page where we can see the issue ?