Design HTML button button size with CSS

 HTML button The size of the button can be controlled by the CSS built-in width and height attributes, respectively, to control the width and height of the button. The button size we need can be accurately designed, which is better than the traditional HTML control of the button size. To be more accurate, let's review the HTML button button syntax first, and then apply CSS to redesign the button size. The example in this article is a standard technique for button size design, which is supported by all major browsers.

HTML button button syntax

<input type="button" value="button value" name="button name" style="button style">

The above is the standard HTML button design syntax. The last style is used to declare a section of CSS style syntax. This article is to use that style to declare the width and height attributes to design the button size. Please see the sample program Code and actual effect.

For the introduction of buttons, please refer to the detailed explanation of " HTML button buttons ".

Design HTML button button size example with CSS

<input type="button" value="button value" name="button name" style="width:100px;height:30px;">
<input type="button" value="button value" name="button name "style="width:120px;height:40px;">
<input type="button" value="button value" name="button name" style="width:140px;height:50px;">

Effect of the example

  

We prepared three buttons in the example, and adjusted their sizes through the width and height properties of CSS . From left to right, you can clearly see the results of the three button sizes, and the display text (value) of the button will be It’s centered vertically, so don’t worry about the problem of text running off if you adjust the button size.