Is it possible to get Cufon to work on a button?

Question

So right now I'm bashing my head - at the moment we use an element for a button to give it our own custom font, fine - this works, but as we're using Cufon on the rest of the site, we're wondering if it's possible to get Cufon working on a button.

So far I've changed the button to an and using standard css styles on an 'input' or 'input[type="submit"]' element work fine - but I've tried both of these in cufon to no avail.

This is a button - so as Cufon generates images, this should work, but maybe I'm doing it wrong - can anyone help?

Answer 1

Using the element in the following way: value worked when applying the Cufon style: Cufon.replace('button', {color: '-linear-gradient(#999, 0.45=#666, 0.45=#555, #999)'});

Thanks very much :)

Answer 2

The only solution I found to use Cufon on <input type="submit"/> buttons was to use Javascript (jQuery personally).

1. Copy the input button's text (the "value" attribute) to a span .
2. Replace the span using Cufon.replace()
3. Remove the input button's text
4. Position the span over the button
5. Propagate the click() event from the span to the button

Done !

Answer 3

I believe there is no way to make Cufon work with . Main reason being that there is no place to insert the canvas...

However you could simply switch to the more semantically fit , that need closure and thus creates the place for the canvas.

Very important though, make sure you specify the type with it as well, since IE7 and below won't submit the form if you don't. It also seems that specifying the type leads to uniform behavior throughout all browsers.

Let me know if the above helped! Cheers

Answer 4

$('.input-button').each(function(){
    $(this).hide().after('<span class="input-button">').next('span.input-button').text($(this).val()).click(function(){
        $(this).prev('input.input-button').click();
    });
});

I used the above code to copy my inputs value into a span, which allows me to use cufon. It works great and still falls back to the 'submit' input with javascript disabled.