Call to Action button Generator

Create your Call to Action Button using this simple and free generator, if you want to share your design then submit it to us for inclusion in our Awesome Gallery of Buttons which you can find below.

Follow these simple steps:

1. Select your button details

2. Build it (Click the button)

3. Copy the code to your website

YOUR BUTTON SETTINGS


  1. Drop Shadow:


  2.   
     


  3. Light: Thin Light: Dark: Thin Dark: None:


  5. Do not use External Links

    6.  

    I love this button and want to share it with everyone
    please include it in your Awesome Gallery of Buttons.



  6.   
     


  7.   
     


  8. Regular: Italic: Bold:


  9. px


  10. Normal: Drop Shadow: Indented: Text Glow:


  11. None: Left: Right:


Awesome Gallery of Buttons

Simple Round Edged Green Button   Basic Green Button   Basic Red Button   Red Bullet   Blue Bullet   Custard Tart   Cloudy Sky   Orange Peel   Green Fuzz   Black Plastic   Pill   Blue Pill   Super Awesome Button   Try Turquoise   Super Awesome Orange Button   Grey Slate   Prøv mig nu

If there is anything we have missed or you would like us to include please let us know.

The hover colour is currently worked out as the inverse of the normal state.

 

COMMENTS

FEB
15

david

Tuesday 15th February, 2011

13:57:07


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.


JUN
6

Doug Brubaker

Monday 6th June, 2011

16:28:37


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!


JUN
6

David

Monday 6th June, 2011

16:46:00


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.


JUL
6

Computer Repair

Wednesday 6th July, 2011

17:51:19


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.  :)


JUL
6

Computer Repair

Wednesday 6th July, 2011

17:53:19


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)?


JUL
7

David Radisic

Thursday 7th July, 2011

10:14:49


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;

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

Let me know how you get on.


AUG
30

Doug Brubaker

Tuesday 30th August, 2011

21:10:02


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.


AUG
31

David

Wednesday 31st August, 2011

09:06:36


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.


AUG
31

Doug Brubaker

Wednesday 31st August, 2011

13:37:20


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!


AUG
31

Doug Brubaker

Wednesday 31st August, 2011

13:40:52


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?


AUG
31

Doug Brubaker

Wednesday 31st August, 2011

13:50:35


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!


JAN
31

edda

Tuesday 31st January, 2012

21:03:51


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


FEB
1

David

Wednesday 1st February, 2012

08:25:23


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


POST A COMMENT

Comment Guidelines:
Please provide valid email address.
Email addresses are never displayed. HTML is not permitted. Line breaks and paragraphs are automatically generated. Off-topic or inappropriate comments will be edited or deleted. Email addresses will never be published but may be added to our mailing list.
Thanks.

Name: (required)

E-Mail: (required, never displayed)

URL: optional

Comments:

 

To prove you're a person (not a spam script), type the security text shown in the image.

 

 

Preview

Try me now!

 

Link to or share this button using this unique link.

Here is the button text:

<a href="try.html" class="button">Try me now!</a>

Here is the style sheet code:

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

    font-family: Arial, Helvetica, sans-serif;

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

    text-shadow: 0 -1px 1px rgba(0,0,0,0.3) !important;

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

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

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

    text-decoration: none;
    background-color: #B3502D;
    color: #000000;
}
</style>