Can I provide an HTML submit button with more than one color?

Question

My client asked me to send a button with two words and three different text colors:

<input type="submit" value="SUBMIT NEWSLETTER" /> 

SUBMIT = black NEWS = black LET = white TER = black

I assume CSS will not do this. Maybe Javascript?

Thanks in advance for any ideas!

Answer 1

Just use the button and put a space in it

 <button type="submit">SUBMIT NEWS<span style="color:white">LET</span>TER</button> 

---

Fiddle - http://jsfiddle.net/Lczmkmr1/

Answer 2

It works with button , span and CSS.

 <button type="submit" style="background-color:#ff0000"> <span style="color: #ffffff">Submit</span> <span style="color: #000000">Newsletter</span> </button> 

Answer 3

you can do it with css, you just need to use span:

 <button>Submit News<span id="white">let</span>ter</button> 

and css:

 #white{ color: white; } 

Answer 4

At first

 <button type="submit">SUBMIT NEWS<span style="color:#fff;">LET</span>TER</button> 

Second

 <button type="submit">SUBMIT NEWS<span class="white">LET</span>TER</button`> .white{ color:#fff; } 

Answer 5

yes, maybe you can use the deflection inside the button tag.

<button> <span style="color:red;">Click</span> <span style="color:blue">Me</span> </button>

Answer 6

 button{ width:800px; background-image: url(http://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg); background-repeat: no-repeat; height:439px; margin-left:35px; display:block; color:white; border: none; } 

 <button></button> 

This is just a very large button, because the image is too large to adjust the height and width to suit your needs.