Celebrating 5 Years! Get 25% off GP Premium with the discount code: CELEBRATING5

[Resolved] Custom colors for buttons

Home Forums Support Custom colors for buttons

This topic contains 5 replies, has 3 voices, and was last updated by  Tom 2 years, 6 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #143248

    Calvin

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

    #143266

    Tom Lead Developer

    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>

    #147412

    Calvin

    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

    #147478

    Tom Lead Developer

    You’re welcome, glad I could help 🙂

    #241872

    muralidharan

    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

    #241964

    Tom Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.