How to create a button in HTML?

About

This page shows you how to create a button in HTML.

Type

HTML element button

In html, there is two kind of button:

• the input element with a button type ¹⁾ - no default behavior expected that the text of the button is given by the value property
• the button element ²⁾:
  • much easier to style than <input> elements.
    • You can add inner HTML content (think <i>, <br>, or even <img>),
    • and use ::after and ::before pseudo-elements for complex rendering.
  • and where you can add a submit behavior

<input type="button"  value="Click Me" />
<button>Click Me</button>

Css

<div id="my-button" onClick="console.log('You clicked me')" >Click me</div>

#my-button {
        padding: 10px 16px; 
        border: 1px solid; 
        border-radius: 6px; 
        background-color: #31b0d5; 
        color: white; 
        text-align: center; 
        display: inline-block;
        font-size:18px;
}

Bootstrap

http://getbootstrap.com/css/#buttons

Use the button classes on an a, <button>, or input element.

Class:

• Button: btn
• Color: btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-primary,
• Mode: btn-link
• Size (per descendant order): btn-lg, No Class, btn-sm, btn-xs

<button type="button" class="btn btn-info btn-lg mb-3" onclick="console.log('ouch !');">Click me</button>

Button Styled as an Anchor

When using a button in a list of action, you want it styled mostly as an anchor (hyperlink)

Example:

• The button style

button {
    display: inline;
    border: 0;
    color: inherit;
    font: inherit;
    line-height: normal;
    overflow: visible;
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

with the following HTML

<p>
<a href="#">A link</a> and a <button>button</button> in a paragraph
</p>
will render as: