How to style text of submit button - html

Question

I have a link styled as follows:
<style>
.addNew{
background-color: #FFF;
display: block;
margin-top: 10px;
padding: 20px;
color: #08c;
border:3px dashed #08c;
cursor: pointer;
width: 100%;
box-sizing: border-box;
font-size: 1em;
}
</style>
<a class='addNew'>
<i class="fa fa-plus" ></i> Add new
<span style='text-decoration:underline'>Object</span>
</a>
I am using a span-tag inside the text and a font-awesome icon.
How can I use this for an submit button? I tried this:
<input type='submit' class='addNew' value="Add new Object">
But I have no idea how to style the text of the submit button.

Answer 1

Use a button element.
<button class='addNew'>
<i class="fa fa-plus" ></i> Add new
<span style='text-decoration:underline'>Object</span>
</button>
… then you can have child elements and target them independently for styling.

Answer 2

You can use <button>
<button><i class="fa fa-plus"> Add new <span style="text-decoration:underline;">Object</span></button>
Button behaviour is different then <input type="button"> or <input type="submit">. You can append elements in <button>.

Answer 3

You can also use <button> tag for submit. You need to also give the button a type of submit to capture the browser event.
<button type="submit">
<a>link</a>
<span>span</span>
</button>
EDIT: Why you should specify type of submit
<form>
<input />
<button type="button">not a submit button</button>
<button type="submit">submit button</button>
</form>
In this case, anyone looking at your code will know exactly which <button> is the actually submit button in a second. Also, if someone is going to get the form's submit button with CSS selector, one can easily do so by button[type="submit"]. Yes submit is the default type, but it is also the better practice for readability and easier for debugging.