HTML button

The HTML button is widely used. In addition to sending out forms, it can also be used to make some special effects to allow netizens to interact. The HTML button function that appeared early has also evolved with the development of web applications. , Combined with JavaScript events to trigger more interesting functions, and through the ingenuity of web designers, a simple button becomes more difficult. In addition, the later popular CSS syntax makes the traditional buttons more beautiful. Here are some simple examples of HTML Button for reference.

HTML button basic syntax

<button type="button">I am the button</button>

Another common way to write in forms is to write through the <input> tag

<input type="button" value="I am the button">

These two writing methods seem to have the same result, but they can be used differently. If you want to make a special effect of a picture button in HTML, you must use the <button> tag, which is not necessarily in CSS.

HTML button Image button example

<button type="button"><img src="Image URL"></button>

HTML button Hyperlink button example

<input type="button" value="Link name" onclick="location.href='Link to the page'">

The onclick syntax used here is a function of JavaScript, which means what actions will be taken when the mouse presses the button. Here we add local.href='URL to link' into the event to let users After triggering the button function, go to the target webpage you want to go to. Please pay attention to the application of single quotes and double quotes to avoid misinterpretation by the browser.

HTML button size design

Set button button width, height and text size

<input type="button" value="I am the button" style="width:150px;height:40px;font-size:20px;">

This example uses the width, height, and font-size in the CSS syntax to set the specifications of the button. In addition, CSS also has many rules that allow you to beautify the button, such as the background color ( background-color), border (border), gradient, font-family... etc.

Possible values and attributes of HTML button

• disabled-A button that cannot be operated, only for viewing but not for pressing.
• name-the name of the button
• type-the type of button, including button (simple button), reset (empty form), submit (submit form)
• value-is the value of the button