- This topic has 13 replies, 6 voices, and was last updated 4 years, 9 months ago by Leo.
-
AuthorPosts
-
October 10, 2015 at 4:44 am #143248Calvin
Hi Tom,
do you have a css I can use for my child theme where I can customize the colors (background, text, in hover etc.) of the buttons I insert via “button shortcode”? It seems the only color I can select when inserting the button is the color of the Glyphicons.
Thanks!
CalvinOctober 10, 2015 at 8:35 am #143266TomLead DeveloperLead DeveloperHi there,
What button shortcode plugin are you using? They should have built in colors?
I do have this CSS kicking around:
.button.medium { font-size: 25px; } .button.large { font-size: 35px; } .button.sun-flower, .button.sun-flower:visited { background: #F1C40F; color:#FFF; } .button.sun-flower:hover, .button.sun-flower:active { background: #E2B607; color:#FFF; } .button.orange, .button.orange:visited { background: #F39C12; color:#FFF; } .button.orange:hover, .button.orange:active { background: #E8930C; color:#FFF; } .button.carrot, .button.carrot:visited { background: #E67E22; color:#FFF; } .button.carrot:hover, .button.carrot:active { background: #DA751C; color:#FFF; } .button.pumpkin, .button.pumpkin:visited { background: #D35400; color:#FFF; } .button.pumpkin:hover, .button.pumpkin:active { background: #C54E00; color:#FFF; } .button.alizarin, .button.alizarin:visited { background: #E74C3C; color:#FFF; } .button.alizarin:hover, .button.alizarin:active { background: #DB4334; color:#FFF; } .button.pomegranate, .button.pomegranate:visited { background: #C0392B; color:#FFF; } .button.pomegranate:hover, .button.pomegranate:active { background: #B53224; color:#FFF; } .button.turquoise, .button.turquoise:visited { background: #1ABC9C; color:#FFF; } .button.turquoise:hover, .button.turquoise:active { background: #12AB8D; color:#FFF; } .button.green-sea, .button.green-sea:visited { background: #16A085; color:#FFF; } .button.green-sea:hover, .button.green-sea:active { background: #14947B; color:#FFF; } .button.emerald, .button.emerald:visited { background: #2ECC71; color:#FFF; } .button.emerald:hover, .button.emerald:active { background: #28BE68; color:#FFF; } .button.nephritis, .button.nephritis:visited { background: #27AE60; color:#FFF; } .button.nephritis:hover, .button.nephritis:active { background: #219D55; color:#FFF; } .button.river, .button.river:visited { background: #3498DB; color:#FFF; } .button.river:hover, .button.river:active { background: #2A8BCC; color:#FFF; } .button.ocean, .button.ocean:visited { background: #2980B9; color:#FFF; } .button.ocean:hover, .button.ocean:active { background: #2475AB; color:#FFF; } .button.amethyst, .button.amethyst:visited { background: #9B59B6; color:#FFF; } .button.amethyst:hover, .button.amethyst:active { background: #8D4CA7; color:#FFF; } .button.wisteria, .button.wisteria:visited { background: #8E44AD; color:#FFF; } .button.wisteria:hover, .button.wisteria:active { background: #80399D; color:#FFF; } .button.wet-asphalt, .button.wet-asphalt:visited { background: #34495E; color:#FFF; } .button.wet-asphalt:hover, .button.wet-asphalt:active { background: #263849; color:#FFF; } .button.midnight-blue, .button.midnight-blue:visited { background: #2C3E50; color:#FFF; } .button.midnight-blue:hover, .button.midnight-blue:active { background: #22303F; color:#FFF; } .button.silver, .button.silver:visited { background: #BDC3C7; color:#FFF; } .button.silver:hover, .button.silver:active { background: #ACB2B7; color:#FFF; } .button.concrete, .button.concrete:visited { background: #7F8C8D; color:#FFF; } .button.concrete:hover, .button.concrete:active { background: #6D7B7C; color:#FFF; } .button.graphite, .button.graphite:visited { background: #454545; color:#FFF; } .button.graphite:hover, .button.graphite:active { background: #363535; color:#FFF; }
To use it, you can just use the button and color class, like this:
<a href="#" class="button graphite">My Graphite Button</a>
October 25, 2015 at 6:03 am #147412CalvinHi Tom,
thanks, I used the workaround with the code you provided. Fyi: the button shortcode that is included in the editor (see here: http://i.imgur.com/DNnjsWG.png) does not provide a color option for the background color, only for the color of the glyphicon (see here: http://i.imgur.com/xjM9W5g.png)
Cheers!
CalvinOctober 25, 2015 at 10:43 am #147478TomLead DeveloperLead DeveloperYou’re welcome, glad I could help π
November 5, 2016 at 1:00 am #241872muralidharanHI Tom
where do i paste the codes you have suggested?
1. CSS? – .button.graphite:hover,
.button.graphite:active {
background: #363535;
color:#FFF;
}2. Custom class – My Graphite Button
can i paste this in the text editor? i use in rows created by page builder? last time the whole page got messed up π
Thanks
November 5, 2016 at 10:29 am #241964TomLead DeveloperLead DeveloperThis should help: https://generatepress.com/knowledgebase/adding-css/
June 14, 2019 at 12:36 pm #929928patrickHow do you get the button shortcode? I want to add a shortcode to make a button.
So far I tried to add a button but it’s not showing up just some text…
June 14, 2019 at 2:48 pm #930018DavidStaffCustomer SupportHi there,
there isn’t a shortcode for buttons in GP and the OP never stated what plugin they were using. To add a button, switch to the visual editor and add this markup, edit the URL and text accordingly:
<a href="#" class="button">My Button Label</a>
June 16, 2019 at 3:31 am #931148patrickHi David,
I tried this without good result unfortunately.
See the following image. What is it I’m doing wrong?
June 16, 2019 at 5:34 am #931205DavidStaffCustomer SupportHi there,
in the post / page editor, make sure you’re in the Text editor ( not visual ) tab before adding the code. The button will only display on the front end not in the editor.
June 16, 2019 at 11:50 am #931598patrickThank you so much David! Really helpful it’s working now.
One more question how can I make all the links that redirect from the butons open in a new tab/Window?
June 16, 2019 at 1:49 pm #931646LeoStaffCustomer SupportThis should help:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_targetLet me know π
June 17, 2019 at 10:29 am #932556patrickWorked like a charm thank you.
June 17, 2019 at 10:32 am #932558LeoStaffCustomer SupportNo problem π
-
AuthorPosts
- You must be logged in to reply to this topic.