[Resolved] Custom colors for buttons

Home Forums Support [Resolved] Custom colors for buttons

Home Forums Support Custom colors for buttons

Viewing 14 posts - 1 through 14 (of 14 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
    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
    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
    Lead Developer
    #929928
    patrick

    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…

    #930018
    David
    Staff
    Customer Support

    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>

    #931148
    patrick

    Hi David,

    I tried this without good result unfortunately.

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

    View post on imgur.com

    #931205
    David
    Staff
    Customer Support

    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.

    #931598
    patrick

    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?

    #931646
    Leo
    Staff
    Customer Support
    #932556
    patrick

    Worked like a charm thank you.

    #932558
    Leo
    Staff
    Customer Support

    No problem πŸ™‚

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.