Как стиль текста кнопки отправки

Question

У меня есть ссылка в стиле следующим образом:

<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> 

Я использую поверочного-тег внутри текста и font-awesome icon. Как я могу использовать это для кнопки отправки? Я пробовал:

<input type='submit' class='addNew' value="Add new Object"> 

Но я понятия не имею, как стиль текста кнопки отправки.

Answer 1

Использовать button element.

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

... тогда вы можете иметь дочерние элементы и ориентировать их самостоятельно для стилизации.

Answer 2

Вы можете использовать <button>

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

поведение кнопки отличается, то <input type="button"> или <input type="submit">. Вы можете добавлять элементы в <button>.

Answer 3

Вы также можете использовать тег <button> для отправки. Вам нужно также дать кнопке тип submit, чтобы захватить событие браузера.

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

EDIT: Почему вы должны указать type из отправить

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

В этом случае, кто смотрит на ваш код будет точно знать, какие <button> кнопка на самом деле представить в секунду. Кроме того, если кто-то собирается получить кнопку отправки формы с помощью CSS-селектора, можно легко сделать это на button[type="submit"]. Да submit является типом по умолчанию, но также является лучшей практикой для удобства чтения и упрощения для отладки.