Using Cufon on INPUT buttons

How to get Cufon to work on html input and submit buttons.

Use this javascript with jquery and cufon, it converts buttons into something that can be styled with cufon.

 

<style type="text/css">
.button {
    background:none;
    border:none;
    color:#078dab;
    font-size:18px;
    display:inline-block;
    cursor:pointer;  
}
</style>
<script type="text/javascript">
$(function() {
    $('.button').each(function(){
        $(this).after(unescape('%3Cspan class="button"%3Eaa%3C/span%3E'));
        $(this).hide();
        $(this).next('span.button').text($(this).val()).click(function(){
            $(this).prev('input.button').click();
        });
    });
    Cufon.replace('.button');
});
</script>

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

Leave a Reply

Your email address will not be published. Required fields are marked *