在提交时呈现输入文本的按钮

Question

我一直在看字体网站，他们在提交时以选定的字体呈现输入文本，我想知道Cufon如何做到这一点。

例如:

http://www.fontsquirrel.com/fonts/Nobile#testdrive -选择试驾选项卡

和这里:

http://new.myfonts.com/fonts/lucassharp/hera-big/向下滚动以输入您自己的示例文本

Answer 1

try this

<div class="btn_submit btn_normal spacer-100 ">
<h2>Next</h2>
<input type="submit" name="submit"   value="" class="btnsubmit" />
</div>

/*Required CSS*/
.spacer-100{width:100px;}
.btn_submit{margin:22px auto; overflow:hidden; position:relative;
 padding:2.5% 3%;
 background: #e0efff;    background-repeat:repeat;
 background: -webkit-gradient(linear, left top, left bottom, from(#f9fcff),   to(#e0efff));
 background: -moz-linear-gradient(center top, #f9fcff, #e0efff);
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9fcff', endColorstr='#e0efff');
 border-top:1px solid #e2effc; border-right:1px solid #a8cae9;border-bottom:1px solid #91bbe0;border-left:1px solid #e2effc;
 }
.btn_submit:hover{
background: #a8cae9;    background-repeat:repeat;
background: -webkit-gradient(linear, left top, left bottom, from(#f9fcff), to(#a8cae9));
background: -moz-linear-gradient(center top, #f9fcff, #a8cae9);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9fcff', endColorstr='#a8cae9');
border-top:1px solid #e2effc; border-right:1px solid #a8cae9;border-bottom:1px solid #91bbe0;border-left:1px solid #e2effc;
}
.btn_submit h2{color:#002e4f; font-size:22px;  text-align:center;}
.btn_submit input[type="submit"]{position:absolute; left:0px; top:0px; z-index:5;     display:block; overflow:visible; border:0px none; background:none; height:46px;    cursor:pointer; }

  ////////--------- required Jquery
 $(document).ready(function(){
var wt = $('.btn_normal').width();
var ht = $('.btn_normal').height();
$('.btnsubmit').css({width:wt+25}) //25 is the button padding
})