[Support request] Is there a code to generate button?

Home Forums Support [Support request] Is there a code to generate button?

Home Forums Support Is there a code to generate button?

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #2065449
    uglyc

    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.

    #2065544
    David
    Staff
    Customer Support

    `Hi there,

    are you using the Block Editor ?

    #2067078
    uglyc

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

    #2067398
    David
    Staff
    Customer Support

    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>

    #2068277
    uglyc

    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,

    #2068278
    Elvin
    Staff
    Customer Support

    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. ๐Ÿ˜€

    #2068282
    uglyc

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

    #2068284
    Elvin
    Staff
    Customer Support

    No problem. ๐Ÿ˜€

    #2068384
    uglyc

    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

    #2068403
    Elvin
    Staff
    Customer Support

    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?

    #2068419
    uglyc

    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

    #2068435
    Elvin
    Staff
    Customer Support

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

    Can you share us how you’re adding it?

    #2068444
    uglyc

    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.

    #2068627
    David
    Staff
    Customer Support

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

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.