Add color on parts of the text of an html button

Question

I have a bunch of hmtl buttons, some have a value like: "Title*" I would like the star to be colored red while the rest of the text is black. Is this possible?

I found this code suggestions to make the text colored:

<form>
<input type="button" value="this is a styled text button" style="color:#fff;">
</form>

Is something like this possible to modify so only parts of the text in value will be affected?

Answer 1

You need to use a span as others hav suggested. I would however completely avoid using inline css with the style attribute. Instead use classes. Its hard to recommend how exactly to apply the CSS without knowing the context of the usage but the following would be an example:

HTML:

<button class="starred">Title <span>*</span></button>

CSS:

button.starred span { color: #f00; }

Answer 2

put that * in a span like

<button type="button">Title <span style="color:red;">*<span></button>

Update :

 <style>button>span{style="color:red;"}</style>
    <button type="button">Title <span>*<span></button>

Answer 3

Instead of <input type="button"/> you can use <button> tag,and style its label:

<button>Title<span style="color:#f00">*</span></button>