Yesterday I published a post on How to Add Colored Content Boxes to a site powered by the Genesis Framework. Today, I’d like to do the same with adding color buttons.
There are a number of themes in the market that implement this with shortcodes. I feel that isn’t necessary and want to show you just how it easy it is to do with CSS.
We will be implementing the CSS into the Genesis parent theme when version 1.9 is released, and you can see the 6 default color buttons below:
Implementing the Color Buttons
In your text editor, all you need to do is add a class to your link. Here’s how that should look:
<a class="button-blue" href="#">Blue Button Link</a>Add Color Button CSS to Your Style Sheet
In your theme’s style.css file, place the following code and edit as necessary:
/* Color Buttons
------------------------------------------------------------ */
.button-blue,
.button-gray,
.button-green,
.button-purple,
.button-red,
.button-yellow {
color: #fff;
padding: 5px 10px;
}
.button-blue:hover,
.button-gray:hover,
.button-green:hover,
.button-purple:hover,
.button-red:hover,
.button-yellow:hover {
text-decoration: none;
}
.button-blue {
background-color: #afcde3;
border: 1px solid #afcde3;
}
.button-blue:hover {
background-color: #83a2be;
border: 1px solid #83a2be;
}
.button-gray {
background-color: #bdbdbd;
border: 1px solid #bdbdbd;
}
.button-gray:hover {
background-color: #919191;
border: 1px solid #919191;
}
.button-green {
background-color: #b2ce96;
border: 1px solid #b2ce96;
}
.button-green:hover {
background-color: #86a36e;
border: 1px solid #86a36e;
}
.button-purple {
background-color: #bebde9;
border: 1px solid #bebde9;
}
.button-purple:hover {
background-color: #9291c7;
border: 1px solid #9291c7;
}
.button-red {
background-color: #e9b3b3;
border: 1px solid #e9b3b3;
}
.button-red:hover {
background-color: #c78787;
border: 1px solid #c78787;
}
.button-yellow {
background-color: #fadf98;
border: 1px solid #fadf98;
}
.button-yellow:hover {
background-color: #ecb870;
border: 1px solid #ecb870;
}It’s THAT simple. So go on, add some color buttons to your website, and stand out!
Hey Brian, I’m learning a lot from your tutorials. But I was wondering if it would be okay if I tweaked your code for my website which uses the WordPress default theme TwentyEleven? Or is it only for users that have purchased the Genesis Framework? Thanks for sharing amazing and useful information.
Last two posts are showing that Genesis going to take a great leap with these styles.
I don’t like short codes either as they kind of lock you into a theme. Should you change themes you have bit of a mess to clean up. It’s amazing what you can do with only CSS and a bit of HTML.
Anyway, thanks for this continuing series of how-tos.
Awesome post, Brian! I dislike the use of shortcodes for this purpose. So simple just to use some basic CSS.
I’m personally the opposite. I would rather use a short code so if I need to change something on the entire site, it’s in one spot and I’m not stuck using the same naming convention forever.
To each their own
Isn’t that the point of CSS though? Changing it in one spot (style.css) and affecting the whole site?
Yeah, am a little confused myself.
Thanks you so much!
That’s absolutely the point.
I’m talking about .button-blue for example.
I also use shortcodes because I often include more than one thing in a button, like [myshortcode url="#" text="Anchor"] etc. Then I can preserve both the formatting of the HTML and classes on the fly for wherever that shortcode is used.
Maybe I just use more complex links and buttons, rather than a simple class=”button-blue” for my links. Call me the outlier
Oh, also, I often do it when I have multiple buttons grouped together. Like DetailsDemo. I did this recently where I wanted to make those links open in a new window, so I changed the shortcode I made instead of having to go through all of the posts. Helps me manage my usability better.
Yeah, in this case that makes total sense – so agree with you.
From Boxes to buttons – nice one Brian.
What next?
Boxes, buttons…. backgrounds?
The only other B I could think of.
Thanks Brian, this and the previos posts were something I really needed but never got the time to get into it. Now I can just copy and paste and enjoy the fruits of your labor
Thanks for whipping this up so quickly Brian.
Personally, i’d prefer shortcodes which are flexible and don’t lock me into one particular framework like what happened with Woo.
That’s why i’m looking for a good tutorial which i can edit to bring back to life the Woo shortcodes left over in my content!
I think its a bit like what Matt Mullenweg stated last year. Make it easy for people to leave and they’ll stay!
Cheers
Using markup like divs in my tutorial don’t lock you into Genesis. It just means if you switch themes you need to make sure the CSS is in the new theme.
Creating something like:
[genesis_content_box_open]text goes here[genesis_content_box_close]
would be.
That reminds me… your last two posts both had “…… a Genesis-Powered Website” in the titles.
Good old CSS doesn’t need any particulat platform, will work on any website.
A little color goes a long way. I like the light gray box the best. Subtle, yet distinctive.
Awesome! Love this and the content boxes…thanks! You just continually make our lives better and work faster.
Don’t know if this is unique to me alone. On google chrome, the boxes do not show on this page, it shows in safari though.
Do a hard refresh in Chrome, it’s probably the browser cache that needs to be cleared.
if you think anyone would have interest, would like to see a post on adding Nav bar menu icons to each menu itemin a Genesis theme. I am using Eleven40.
thanks
Good suggestion, and something I’ll consider doing in the near future.
Hey Brian, thanks for this. Even though it’s really basic stuff, I’m sure many Genesis users will appreciate it. I have been using CSS for custom buttons, boxes, slogans, banners, and many more for quite a while. I love the control it gives me to easily create color schemes for new sites just by tweaking a few bits of code. Who needs shortcodes!
It may be easier to use the opacity option instead of so many colors. For example…
.button-blue,
.button-gray,
.button-green,
.button-purple,
.button-red,
.button-yellow {
color: #fff;
opacity: 0.7;
padding: 5px 10px;
}
then on the hovers…
.button-blue:hover,
.button-gray:hover,
.button-green:hover,
.button-purple:hover,
.button-red:hover,
.button-yellow:hover {
opacity: 1.0;
}
Then you can get rid of all those other :hover things.
There is also a more logical way to do colors too. How about this….
.button {
color: #fff;
opacity: 0.7;
padding: 5px 10px;
}
.button:hover {
opacity: 1.0;
text-decoration: none;
}
.button.blue {
background-color: #afcde3;
}
.button.gray {
background-color: #bdbdbd;
}
.button.green {
background-color: #b2ce96;
}
.button.purple {
background-color: #bebde9;
}
.button-red {
background-color: #e9b3b3;
}
.button.yellow {
background-color: #fadf98;
}
/* USAGE */
Blue Button Link
I don’t know how to post code in the comments… but I can show you if there is a way.
Thanks Fred, that’s cool – I hadn’t thought of that, I really like being systematic like you have suggested.
You can put code in to the comments- it shows you can use the “code” html tag.
Thanks Brian –
Just put these in place on a new project that launched this week. Nice finishing touch! I appreciate the resources!
Peace
Wayne
Is there a place where we can see what we need to include when we upgrade old child themes?
Another great, simple & useful post. Just sent another newbie your way. Thanks Brian!
Thanks for the code Brian.
I added a few ideas. See what you think.
http://bradpotter.com/css-buttons-for-genesis/
Very nice!
This is a very good tutorial. Thanks Brian for the tutorial. Now I should start learning basic css and html. Great post.
Hi Brian,
Love your site and what you’re doing here, truly an inspiration. I am curious as to how you get the newsletter signup box at the end of your posts? It seems custom, would it be as simple as copying the CSS from your site and then creating a hook for it? Where would I implement the aweber code? Thanks, and keep up the good work.
Sorry Brian,
Just remembered you already posted on this
. Thanks.
-Ben
Hi Brain!
Its been nice to have some color buttons and I like the simplicity of these buttons and I really appreciate you all the time provided with great simple and solid solutions. Great work Brain!
I placed the exact code as is in my style.css (in the very bottom) and it didn’t seem to work. Is there something I need to change from the code above for it to work? Or am I placing it in the right place? (I’m using the adorable theme)
Anne, can you place a link to your post here in the comments so I can take a look?
Umm.. just checked again now and it works fine! Sorry about that, Brian. I do have a question though.. the text link inside the box comes out orange – which is my blog’s link color. Is there anyway to change the link color in the box to white? As shown above? (You can see the sample on this page: http://greeneggsandmoms.com/contact)
Yes, I have the same problem: links inside the buttons are not white as the examples. They inherit the links color of the child theme. Please, how can we solve this? Thank you!
So… what’s an example of this? Where would you use a button in a post or page?
You could use one of our landing page templates in Genesis and use it as a call to action button.
How do you change text color?
Change this CSS… color: #fff;
If you did a long case study that went multiple pages, you could create buttons for “Previous” and “Next”. I’ve always used images for this, but CSS buttons means fewer images to load and easier maintenance if you want to change button styling.
Hello Brian. Thanks for this great tutorial.
It seems not to be working at enterprise child theme Ver. 1.0.1. Am I wrong?
I just added the code provided at css style sheet and added the classes with the html editor in some of my pages.
Am I doing something wrong?
Thanks a lot.
Can you provide a link to your site so I can see?
The tutorials are great brian, May i know how to implement the same for “[Continue Reading]” link and what font recommendation for eleven40 other than already used in the theme….
Thanks in advance
For that I simply used the WordPress “More” tag.
Hi Brian,
I’m just getting into Genesis, and I really like it so far! I’m still a bit of a beginner, though, and when I tried to add buttons to the CSS of the Lifestyle theme, the text color and text decoration in the button code are overriden by other CSS, and so the text stays dark and underlined. How can I correct for this?
Thanks!
Hey Morgan – can you provide a link to your site and page you have these on? I can help if I can see it in action.
Hi Brian,
Thank you for another great post. I, like Morgan, would like to change the link color in the button in white (as opposed to green as is the default) and not underlined. Could you please advise on how to change this? Here’s an example in action: http://www.thecoronadorealestateteam.com/12-kid-friendly-coronado-activities/
Thanks for being so awesome.
Hey Sarah, sorry for the delay in the response, I was away for a couple days.
Are you wanting to replace all links in your site with the color buttons? I’m a little confused what you’re looking to do.
I see on the page you linked to a color button, but shortly afterwards a normal link.
This is the same Anne Mercado have written above.
Thanks a lot for providing such nice color buttons.
That is very cool trick. I have been looking a way to do this on my other sites. Thanks Brian for adding these CSS buttons codes
But after you click the buttons the links inside the buttons become and remain orange. How can it be solved so the links remain white?
Thanks a lot
.button-blue,
.button-gray,
.button-green,
.button-purple,
.button-red,
.button-yellow {
color: #fff !important;
padding: 5px 10px;
}
Add !important after “color: #fff
Thank you
Couple of questions:
1. How can I add an image of a solid white triangle to place next to the “Red Button Link” text? I think the addition of the white triangle will help direct users to click on the button.
2. How can I add these buttons on top of an image I have implemented within the side bar widgets?
Any and all help on this asap would really help as I am really in the zone on finishing out this site and would love to keep the momentum going with these additions. Thanks!