- This topic has 7 replies, 3 voices, and was last updated 3 years, 3 months ago by
David.
-
AuthorPosts
-
September 14, 2019 at 3:04 am #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?
September 14, 2019 at 5:00 am #1009244David
StaffCustomer SupportHi 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/September 14, 2019 at 8:20 pm #1009675Janani
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?
September 14, 2019 at 8:24 pm #1009676Leo
StaffCustomer SupportYes 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-shadowDavid’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/September 25, 2019 at 6:19 pm #1019164Janani
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);September 26, 2019 at 6:20 am #1019544David
StaffCustomer SupportHi 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/October 3, 2019 at 7:14 pm #1025785Janani
-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);
October 4, 2019 at 3:24 am #1025974David
StaffCustomer SupportSo 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/ -
AuthorPosts
- You must be logged in to reply to this topic.