Change shape of button

[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?

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[Leo]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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);

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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);

[David]

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);
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts