HTML - Button

1 - About

How to create a button.

3 - Type

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

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

3.3 - Bootstrap

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


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

3.4 - Button Styled as an Anchor

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


  • 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

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

Data Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap