HTML - Button

About

How to create a button.

Type

HTML element button

In html, there is two kind of button:

  • the input/button - no default behavior expected that the text of the button is given by the value property
  • the button elements:
    • 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" 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:

Powered by ComboStrap