SummArg | Cursos y recursos para webmasters

28/02/2012

Usar Cufón para un botón dentro de un campo input

Recientemente tuve que aplicar Cufón a un formulario (Contact Form 7, para WordPress) y me encontré con un problema: no se puede aplicar Cufón a un botón input. Y tal como fue mi caso no podía modificar el botón del formulario de modo práctico, pero por suerte en el blog DTBAKER compartieron una solución para mi problema.

Entre etiquetas head colocamos el siguiente código:

<script type="text/javascript">
 $(function() {
 $('.button').each(function(){
 $(this).after(unescape('%3Cspan%3Eaa%3C/span%3E'));
 $(this).hide();
 $(this).next('span.button').text($(this).val()).click(function(){
 $(this).prev('input.button').click();
 });
 });
 Cufon.replace('.button');
 });
 </script>

En el caso de Contact Form 7 podemos reemplazar la clase del botón ingresando [submit”enviar” class:button] en el plugin o bien colocando el siguiente código en lugar del anterior:

<script type="text/javascript">
 $(function() {
 $('.wpcf7-submit').each(function(){
 $(this).after(unescape('%3Cspan class="wpcf7-submit"%3Eaa%3C/span%3E'));
 $(this).hide();
 $(this).next('span.wpcf7-submit').text($(this).val()).click(function(){
 $(this).prev('input.wpcf7-submit').click();
 });
 });
 Cufon.replace('.wpcf7-submit');
 });
 </script>

El botón quedaría de la siguiente manera:

<input type="submit" class="button" name="Click"/>

Y el CSS como ustedes lo deseen.

.button {
    background:none;
    border:none;
    color:#078dab;
    font-size:18px;
    display:inline-block;
    cursor:pointer;  
}

O en el caso de que usen Contact Forms 7, algo así:

.wpcf7-submit {
font-size:22px;
display:inline-block;
cursor:pointer;
background-color: #d5e179;
border: 1px solid #d5e179;
width: 90px;
height: 20px;
padding: 5px 10px;
float:right;
text-align:center;
}

 

Dejar un comentario