How to Adjust Input Elements Within Buttons With CSS
Web forms use the "<input>" tag to create "Submit" buttons, though input elements in general also include text fields of many kinds, ranging from names to phone numbers and dates. Use an ID selector in CSS to target only the button in a cross-browser compatible fashion. Adjust the text within the button using CSS properties that change padding, fonts and colors. These properties help you fine-tune your "Submit" buttons so they look well-aligned and properly formatted.
Other People Are Reading
Instructions
-
-
1
Open the Web page containing the "Submit" button in Notepad or a code editor. Look for "<style>" tags between your "<head>" tags and add this code if you do not find them:
<style type="text/css">
</style>
All of your CSS code goes between the "<style>" tags.
-
2
Scroll down to the end of your Web form code and look for a code similar to this one:
<input type="submit" name="submit" id="submit" value="Send" />
Find the ID name; in the example, the ID name is "submit." Change the text for the button by changing the "value" property if you want to make it different.
-
-
3
Go back to your "<style>" tags and write this code:
#submit {
padding: 20px 10px;
}
Change "submit" to match the ID name you find inside the "<input>" tag. Set padding for the button to create spacing between the button text and the edge of the button. In the above example, the first value for padding sets the vertical padding while the second value sets the horizontal padding.
-
4
Set the font using "font-family" and style your button text as needed, using bold or italic text:
#submit {
padding: 20px 10px;
font-family: Arial;
font-style: italic;
font-weight: bold;
}
-
5
Give your button text a color:
#submit {
padding: 20px 10px;
font-family: Arial;
font-style: italic;
font-weight: bold;
color: blue;
}
-
1
Tips & Warnings
If you do not need compatibility with Internet Explorer versions 6 through 8, replace "#submit" with "input[type='submit']" for more flexible code. In this case, "submit" is not the ID name but the type of input element.
Add "float: right;" to right-align your button with your Web form.
