How to Set the HTML Input Button Width

Save

Web developers place input buttons on forms to allow users to submit data, and sometimes buttons control interactive elements on Web pages, such as toggling menus. Each browser renders input buttons in a different way, and to add to the confusion, the rendering is further effected by the different operating systems your visitors use. Setting dimensions for your HTML input buttons makes website designs more stable and less apt to break. You can do this using Cascading Style Sheet (CSS) code.

  • Open the HTML file of your Web page in a code editor such as NotePad++, jEdit or BBEdit. Locate the code for the button you want to edit, which looks like this:

    <input type="submit" id="my-button" value="Send It!" />

  • Check the value of the "ID" attribute for that <input> tag. If no "ID" is set, then add it into your <input> tag. Use a unique, meaningful name. You will use this name in CSS to target that specific button.

  • Open up your CSS file or add code between <style> and </style> tags, which in turn go between the <head> and </head> tags of your HTML file. Add the following code:

    my-button {

    width: 150px;

    }

    The hash mark is a prefix telling the browser to target an "ID" attribute, and that is followed by the name you gave the <input> tag. Between the curly braces, set the "width" property to your desired value. The above example shows a width of 150 pixels, but you can set ems by replacing the "px" with "em."

Tips & Warnings

  • You can also specify height, padding, margins and any other CSS properties for the HTML input button.
  • Since buttons display differently across browsers and operating systems, do not expect buttons to look the same for every visitor. If you need a certain height, font or color for your button, be sure to set all of them in CSS.

References

  • Photo Credit Jack Hollingsworth/Photodisc/Getty Images
Promoted By Zergnet

Comments

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!