Custom colors for buttons

Hi 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>

Hi 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!
Calvin

You're welcome, glad I could help :)

HI 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

This should help: https://generatepress.com/knowledgebase/adding-css/

How 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...

Hi 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>

Hi David,

I tried this without good result unfortunately.

See the following image. What is it I'm doing wrong?

https://imgur.com/a/0HwV1Rg

Hi 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.

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

This should help:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_target

Let me know :)

Worked like a charm thank you.

No problem :)