Add two different fonts to the same button

Question

I have a button and on it I want to add two text labels whose font and size differ. I also want each text label to appear on its own line. For example, if my labels are ABCD and example, here's how I want them to appear on the button:

ABCD
^example

Here is what I have tried. Is it possible to apply different styles to different parts of the value attribute?

<input style="width:170px; height:100px; font-size:90%; type="button" value="ABCD example">

Answer 1

You could use a button rather than an input and use two span tags inside. For example:

<button class="btn btn-primary" type="button">
    <span style="font-size:14px;">ABCD</span>
    <span style="font-size:10px;">example</span>
</button>

Live example at: http://jsfiddle.net/h6jq7ep2/

I've used inline styles just for simplicity, but obviously you could instead assign a class with the appropriate CSS to each span.