Sorry the comment system was not working correctly, forgot to switch it on. All fixed now.

We welcome your comments, help us make this one of the best Free Call to Action button creators around.

Hi, there:

I like your generator. I am having trouble, however: I cannot seem to get white script for my call to action text. I am using #002EB8 (a shade of blue) for my button color, and #FFFFFF for my text color. When I test it here on your site it looks lovely. The moment I copy/paste the code into my webpage the button looks fine, however, my text comes through red. How can I fix that? Thanks for your help!

Probably due to your a tag settings higher up your style sheet. The call to action button uses a style of .button you could try using .button, .button a {} for your style.

.button will be used for anything with the class button and .button a will be used only where a tags use the class of button.

Let us know if this helps.

Hello there.

First, let me tell you that this lil generator is excellent. Definitely useful.

I seem to be having trouble with compatibility in IE8. It is my understanding that IE8 is rather terrible at rendering CSS (actually, it took my website that I put quite a decent amount if time into and TRASHED it).

Are the troubles related only to IE8 or is it something I may have done when I added the code to my site?

Any further assistance or ideas will be greatly appreciated. :)

Actually....I just switched to IE8 on this page and noticed that all the "cute lil buttons" are not being displayed properly.

Does anyone know if this is limited to IE8 (and therefore works in IE7 and/or IE9)?

Unfortunately ie is non-compliant as far as style sheets are concerned, IE7 does not even recognise CSS2 let alone CSS3. Microsoft still think they should be making the rules and do what they want. Although they are getting there with ie9, so good for them.

There are several work arounds available across the internet including this one I found on a forum, not sure it works though;

[LT]!--[if lt IE 8]>
[LT]script src=\"[HTTP]//ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js\" type=\"text/javascript\">[LT]/script>
[LT]![endif]-->

Let me know how you get on.

David:

Thanks for your reply from June 6. I must confess that I am relatively illiterate in this; I am not following what I should do with the .button, .button a, etc.

Here is my code, the modifications from what your generator would produce are on purpose on my part (such as font size, padding, etc., however, my white text is red and I am having no success getting it to be white. I suspect what you suggested would work, however, I do not know how to implement or deploy what you suggested.

As mentioned, here is my code:

<style type="text/css">
.button {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-style: normal;
font-weight: bold;

text-shadow: #000 0px 4px 4px;

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-khtml-border-radius: 10px;

background-image: url(i/bg_highlight.png);
background-repeat: repeat-x;
background-position: center center;

border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #EDEDED;
border-right-color: #333;
border-bottom-color: #333;
border-left-color: #EDEDED;

-moz-box-shadow: 0px 3px 4px #000;
-webkit-box-shadow: 0px 3px 4px #000;
box-shadow: 0px 3px 4px #000;

background-color: #000699;
font-size: 29px;
text-align: center;
text-decoration: none;
color: #FFFFFF;
margin: 4px;
padding-top: 18px;
padding-right: 2px;
padding-bottom: 18px;
padding-left: 2px;
display: inline-block;
cursor: pointer;
}
.button:hover {

text-decoration: none;
background-color: #0265CB;
color: #ffffff;
}
</style>


Thanks much for your help. My apologies for not getting back to you sooner; we had a mishap at our business back in June that we are still recovering from.

OK no problem. It can be a little tricky but it only requires one change.

.button is a class and so can be attached to specific tags but the a tag (links) have their own agenda, so it is best to set the .button to a .button a or even a.button to ensure the a tag is updated.

Alter;

.button {

to

.button a {

You can then also change;

.button:hover {

to

.button a:hover {


That should do it. Let me know how it goes.

Hi, David:

I had tried that, to no avail. Actually, in fact, what happens is that the button disappears completely when I change the ".button" to ".button a" . I have just my text and nothing else (although the link does work, it just is not visually appealing).

What else should I be looking for?

Thanks for your help!

By the way...when I get this resolved I would like to add a second button. I may need tips on doing that as when I experimented with adding a second one it had a habit of making my first one disappear.

One last item: currently I have two mouse-over java buttons that I intend to replace with two generated by your product. Is there a possibility that I am creating my own issues by integrating this with my existing. ie, should I disable (or flat-out remove) my existing buttons and script and then see what happens?

Hi, David:

I answered my own question re: should I disable or eliminate other java mouse-over buttons that I am using.

I created a new page with just the code for a call to action button using your product. I got the same color results using ".button". I modified both locations to ".button a" and the color changed to all red, both the button and the text. The size also changed (I can deal with that). On hover the colors changed as desired, but the all red in the beginning is not what I'm looking for.

Hopefully this makes sense and is not confusing things here...

Thanks!

Hi David,
How do i add fixed width and height to this button, so all buttons have the same size and have the text centred?

thx Edda

Hi Edda,

The best way is to add the following lines ;

width: auto;
height: auto;


This will make sure the width and height will adjust to the size of whatever it contains.

If you want to specify an exact width and height then use ;

width: 200px;
height: 90px;

Setting the actual pixel amounts as required.

Hope this helps.

David