[Support request] Change shape of button

Home Forums Support Change shape of button

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1009182
    Janani

    Hi,

    I have created buttons with HTML. I see only rectangular box shapes for the buttons.

    how do I change the shape of these buttons from plain rectangle to some other shape? Do I have to us HTML or is there a plugin available for this?

    #1009244
    David
    Staff
    Customer Support

    Hi there,

    you can give them rounded corners with this CSS:

    a.button {
        border-radius: 40px;
    }

    If theres any particular example you have then let us know.

    #1009675
    Janani

    Thank you. This is done. This is the only way to change button shapes? There is no visual way to do it on Generatepress? If I wish to add shadows also, do I have to use CSS?

    Also, will this apply for all the buttons on the website? Or can I give seperate CSS codes for different buttons in the website?

    #1009676
    Leo
    Staff
    Customer Support

    Yes CSS is the only way. GeneratePress isn’t a page builder.

    Shadow can be added with CSS from this site:
    https://www.cssmatic.com/box-shadow

    David’s CSS will apply to all the buttons in the site with button class.

    If you want separate style buttons, you can add a second class as suggested in these examples:
    https://docs.generatepress.com/article/adding-buttons/

    #1019164
    Janani

    Thank you< i tried to bring in some shadows by copying the CSS from this site, but it is throwing up errors. Is this code wrong?

    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);

    #1019544
    David
    Staff
    Customer Support

    Hi there,

    Can you share the entire CSS you have added?

    When adding code to the forum, before pressing Submit, highlight the code and click the Code button it will preserve the formatting.

    #1025785
    Janani
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    #1025974
    David
    Staff
    Customer Support

    So your code should look like this:

    a.button {
        -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
        box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    }
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.