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

Question

So now I hit myself in the head - the moment we use an element for a button to give us our own font, great - it works, but since we use Cufon on the rest of the site, we are wondering if Cufon can be forced work with the button.

So far I have changed the button to a and used the standard css styles for the input element "input" or "input [type =" submit "]", but I tried both of them in cufon no helped.

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

Answer 1

Using an element as follows:

<button type="buton">value</button>

worked when applying the Cufon style:

Cufon.replace('button', {color: '-linear-gradient(#999, 0.45=#666, 0.45=#555, #999)'});

Many thanks:)

Answer 2

$('.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 code above to copy the value of my input into a range, which allows me to use cufon. It works fine and still returns to submit with javascript disabled.

Answer 3

, Cufon <input type="submit" />. , ...

<button>, </button> .

, , , IE7 , . , .

, !

Answer 4

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

• Copy the text of the enter button (attribute "value") to the range.
• Replace range with Cufon.replace ()
• Delete Entry Button Text
• Place the range above the button
• Move the click () event out of range on the button

Done!