Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to give a HTML submit button more than one color? [duplicate]

Tags:

html

css

My client has asked me for a submit button with 2 words and 3 different text colors:

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

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

I'm guessing CSS won't do this. Maybe Javascript?

Thanks in advance for any ideas!

like image 267
Richard Tinkler Avatar asked Apr 15 '16 09:04

Richard Tinkler


People also ask

Can a HTML form have 2 submit buttons?

yes, multiple submit buttons can include in the html form. One simple example is given below.

How add multiple submit button in HTML?

Let's learn the steps of performing multiple actions with multiple buttons in a single HTML form: Create a form with method 'post' and set the value of the action attribute to a default URL where you want to send the form data. Create the input fields inside the as per your concern. Create a button with type submit.

How do I customize a submit button?

The simplest way to do this is by using the WordPress CSS Editor. To open this, go to Appearance » Customize and select Additional CSS. Once you've opened the Additional CSS section, you can paste in your new CSS, click the Save & Publish button, and you're all set!


2 Answers

Just use a button and put a span in it

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

enter image description here


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

like image 170
potatopeelings Avatar answered Oct 16 '22 14:10

potatopeelings


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>
like image 43
Nina Scholz Avatar answered Oct 16 '22 16:10

Nina Scholz