É possível fazer com que Cufon trabalhe em um botão?

Question

Então agora estou batendo a cabeça - no momento em que usamos um elemento para um botão para dar a ele nossa própria fonte personalizada, tudo bem - isso funciona, mas enquanto estamos usando Cufon no resto do site, estamos Quer saber se é possível fazer Cufon trabalhar em um botão.

Até agora, mudei o botão para um e usando estilos CSS padrão em um elemento 'entrada' ou 'input [type = "submit"]' 'funcionam bem - mas tentei os dois em Cufon sem sucesso.

Este é um botão - então, como Cufon gera imagens, isso deve funcionar, mas talvez eu esteja fazendo errado - alguém pode ajudar?

Answer 1

Usando o elemento da seguinte maneira:

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

trabalhou ao aplicar o estilo Cufon:

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

Muito obrigado :)

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();
    });
});

Eu usei o código acima para copiar meu valor de entrada em um span, o que me permite usar o CUFON. Funciona muito bem e ainda volta à entrada 'Enviar' com o JavaScript desativado.

Answer 3

Eu acredito que não há como fazer Cufon trabalhar com <input type="submit" />. Principal razão é que não há lugar para inserir a tela ...

No entanto, você pode simplesmente mudar para o mais ajustado semanticamente <button>, que precisa de fechamento </button> e assim cria o lugar para a tela.

Muito importante, porém, também especifique o tipo, pois o IE7 e abaixo não enviará o formulário se não o fizer. Parece também que especificar o tipo leva a um comportamento uniforme em todos os navegadores.

Deixe -me saber se o exposto acima ajudou! Felicidades

Answer 4

A única solução que encontrei para usar Cufon <input type="submit"/> Os botões deveriam usar o JavaScript (pessoalmente, o jQuery).

1. Copie o texto do botão de entrada (o atributo "value") para um span.
2. Substitua o span usando cufon.replace ()
3. Remova o texto do botão de entrada
4. Posicione a extensão sobre o botão
5. Propagar o evento click () do intervalo para o botão

Feito !