- This topic has 13 replies, 3 voices, and was last updated 2 years, 2 months ago by David.
-
AuthorPosts
-
January 1, 2022 at 2:40 am #2065449uglyc
Hi Generatepress team,
How do I insert a code, which allows me to generate a button in the article? BYW, is it possible to add ‘no-follow’ to it, so to stop google from crawling it. And can I add a boarder radius to it?
Thanks so much for the help.January 1, 2022 at 6:52 am #2065544DavidStaffCustomer Support`Hi there,
are you using the Block Editor ?
January 3, 2022 at 12:55 am #2067078uglycThanks David,
But I wonder what exactly is the code for generating a button, which I can add “no-follow” to it?
Thanks inadvanceJanuary 3, 2022 at 6:37 am #2067398DavidStaffCustomer SupportIf 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>
January 3, 2022 at 7:41 pm #2068277uglycHi 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,January 3, 2022 at 7:50 pm #2068278ElvinStaffCustomer SupportHi 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. ๐
January 3, 2022 at 7:58 pm #2068282uglycHi Elvin,
That’s awesome, I do appreciate that! and I’ll try to customize it myself.
Big thanks~January 3, 2022 at 8:00 pm #2068284ElvinStaffCustomer SupportNo problem. ๐
January 4, 2022 at 12:14 am #2068384uglycHi 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 inadvanceJanuary 4, 2022 at 12:35 am #2068403ElvinStaffCustomer Support1.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;
orwidth: 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?
January 4, 2022 at 12:57 am #2068419uglycHi Elvin,
Thanks again for your patience.
This is what the button looks like in normal page:
https://snipboard.io/8W0ItY.jpgand this is what the button looks like in AMP page:
https://snipboard.io/a1rlEt.jpgJanuary 4, 2022 at 1:10 am #2068435ElvinStaffCustomer SupportAMP is likely messing w/ how you’re adding the CSS to the page.
Can you share us how you’re adding it?
January 4, 2022 at 1:18 am #2068444uglyc1. 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.
January 4, 2022 at 4:59 am #2068627DavidStaffCustomer SupportCan you share a link to the AMP page where we can see the issue ?
-
AuthorPosts
- You must be logged in to reply to this topic.