HTML - Button

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 1) - no default behavior expected that the text of the button is given by the value property
  • the button element 2):
    • 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:





Discover More
Dom Attribute Set To Color Red
Attribute manipulation with DOM

How to add, delete, get any node attribute with the DOM
Class Html Beauty Blue Added
DOM - Class attribute

manipulation in the DOM. API The DOM Web API has a special function to select on class: the getElementsByClassName() function one You can select the class with a selector With Native Javascript...
Card Puncher Data Processing
Datacadamia - Data all the things

Computer science from a data perspective
HTML - (Flow|Body) Content

Most elements that are used in the body of documents and applications are categorized as flow content. Flow content consists of flow elements intermixed with normal character data. (ifbodhead...
HTML - Interactive Content (User Interaction) (Element)

Interactive element are interactive elements that are specifically intended for user interaction. (if the controls attribute is present) (if the usemap attribute is present) (if...
HTML - Palpable content

As a general rule, elements whose content model allows any flow content or phrasing content should have at least one node in its contents: that is palpable content (Can be manipulated ?) and that...
HTML - Phrasing Content (Text)

Phrasing content is: the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs. Most elements that are categorized...
HTML Form - 1001 ways to submit a Form and handle the corresponding Event

This page talks and shows all the ways on how to submit a form and handle the submit event in javascript. How a form can be submitted ? HTML One way is to include a input element of type submit that...
HTML Form - Reset (Element and Event)

A form is with a reset element that creates a onreset event By default, the reset event will reset the value to their initial state. With a inline handler You can reset a form with the following...
How to add/remove CSS inline-style with the DOM

This page talks on how to manipulate the HTML style attribute on the DOM. CSS To set an inline style, you use: the qualified method: element.style.setProperty method of an element or the shortcut...



Share this page:
Follow us:
Task Runner