How to Get Disclosure Buttons On Your Blog Posts Without Using Images

Nothing to Disclose

With the new FTC Disclosure Guidelines, bloggers are scrambling to figure out how they'll include all of the disclosures needed without making their websites look crazy. Most want to use a simple button for their disclosures, though the problem is that many of the RSS Readers, Facebook, Google Plus... they all like to grab the first image in a post for the thumbnail. (Well, Facebook sometimes grabs a random image. Often that's my facebook icon in the header.) So, how do you make a button using just html or css instead of an image? Oh, and it needs to work in Blogger.

I've taken the script from a few places, though the best one was at DevGrow, smooshed a few things together and customized/simplified to create these buttons. The buttons can go to any website you want (great for linking to your full disclosure policy), change size according to what is written in them (so you can re-type what is in them according to the disclosure you need for that post), and you can make them any color you want! Oh, and they work in Blogger. Did I mention that? (For some buttons that work in Wordpress, head over to my friend Carleen's blog, where she has Disclosure Buttons For WordPress Blogs.)

Here's a close up of the buttons:


I've currently made them black, white and grey with a little gradient in them to add interest, but you can make the color any hex number, remove the gradient, make the font bold, etc.


Add this to the CSS area. It can go anywhere, but I just add it as a new section near things like "Mobile".

/* Buttons
----------------------------------------------- */
.button {
padding: 5px 10px;
display: inline;
background: #ffffff url(button.png) repeat-x bottom;
border: none;
color: #000000 ;
cursor: pointer;
font-weight: normal;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.button:hover {
background-position: 0 -48px;
}
.button:active {
background-position: 0 top;
position: relative;
top: 1px;
padding: 6px 10px 4px;
}

.button.black { background-color: #000000; color: #ffffff;}
.button.white { background-color: #ffffff ; color: #000; }
.button.gray { background-color: #f1f0f0 ; color: #000; }

Here's where you change things up!

Add the URL of where you put this image: Download the gradient, upload it to a site like Photobucket and then put the direct image URL in. If you don't want a gradient, remove the entire url(button.png).

To change the background color of a button or the font color to any color you want, you'll need to use the hex number. You can get that from using a program like Photoshop, or you can head to Colour Lovers and play with colors until you find one you like.

After a few hours of trying to get the page to display html like I could get it to display css and I gave up. But, I think it's pretty easy to see what to type. It's a normal link, but to have it show up as a button use class="button white" (or whichever color you want) in the link. Put the html where you want the buttons to show up. So, the top of a post and the bottom of a post is easiest, it's best to just add this to the post template (under settings->post) so it autopopulates in every new post without you doing anything. You can display as many buttons as you want, you can rename buttons to whatever colors you want, etc.