How to Format a Button in CSS
The button on your Internet form is automatically styled when you code it on your page, but you can change the format of this element by using Cascading Style Sheets. CSS enables you to modify particular characteristics, such as the font size and background color, and apply it to your button so the browser obeys these instructions. Use CSS in conjunction with your page's existing HyperText Markup Language to create the button you desire.
Other People Are Reading
Instructions
-
-
1
Bring up your text editor program and open the page that has the button you want to format.
-
2
Enter the following CSS before the closing </head> tag at the top:
<style type="text/css">
</style>
-
-
3
Type ".button { }" between the style elements to create a rule that controls the button. To illustrate:
<style type="text/css">
.button { }
</style>
-
4
Enter the "border: ;" and "background-color: ;" attributes between the curly brackets to style the appearance of the button. Type a hexadecimal color value, pixel (px) value and line style, such as "solid," after the border entry to specify how the outline of the button looks. Further, enter another hexadecimal color after the background-color attribute to define this characteristic. For example:
.button { border: #cccccc 1px solid; background-color: #606060; }
-
5
Type "font-size: ;" and "color: ;" attributes to format the button's text. Enter a number value in pixels after the font-size and a hexadecimal value after the color like so:
.button { font-size: 12px; color: #ffffff; }
-
6
Locate the <input> tag in the HTML code that contains the "submit" or "reset" type to find the button code. Enter "class=button" in the tag to apply the CSS style that formats your button:
<input type="submit" class="button">
-
7
Save your file.
-
1
Tips & Warnings
Always separate each CSS attribute with a semicolon in the style rule to ensure the code works properly. For instance:
.button { border: #cccccc 1px solid; background-color: #606060; font-size: 12px; color: #ffffff; }
Adding a period before your button's style rule name (for example, ".button") allows you to apply it to all of the buttons you require. If you want the rule to format just a single button, enter a number sign before the style term like so: #button
References
Resources
- Photo Credit James Woodson/Digital Vision/Getty Images
