Like text style of submit button

Question

I have a style link:

<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 use the span tag inside the text and font-awesome icon . How can I use this for the 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 an item.

 <button class='addNew'> <i class="fa fa-plus" ></i> Add new <span style='text-decoration:underline'>Object</span> </button> 

... then you can have children and customize them yourself for styling.

Answer 2

You can use <button>

 <button><i class="fa fa-plus"> Add new <span style="text-decoration:underline;">Object</span></button> 

The behavior of buttons is different from <input type="button"> or <input type="submit"> . You can add elements to <button> .

Answer 3

You can also use the tag <button> to send. You also need to tell the button the type submit to capture the browser event.

 <button type="submit"> <a>link</a> <span>span</span> </button> 

EDIT . Why you should specify type for sending

 <form> <input /> <button type="button">not a submit button</button> <button type="submit">submit button</button> </form> 

In this case, anyone who watches your code knows exactly which <button> is actually sending per second. In addition, if someone is going to get a form submit button using a CSS selector, this can easily be done using button[type="submit"] . Yes submit is the default type, but it is also best practice for readability and simplification for debugging.