HTML Rounded Submit Button With CSS Only Example

How to create a simple rounded submit button with CSS only

HTML Rounded Text Input With CSS Only ExampleIf you do web development then chances are you have also developed a few forms. Forms are fundamental for collecting information but can be rather plain and ordinary.

In an effort to make my forms more attractive I’ve taken to styling the submit buttons to have rounded corners and an attractive color other than gray. This simple technique makes the form submit buttons more attractive.

See my post on Rounded Text Input Fields for tips on rounding the corners on your text input fields.
The styles:

<style>
.formRounded input[type="submit"] {
	display:block;
	color:#FFFFFF;
	background-color:#5d9cec;
	border-color:#5899eb;
	text-align:center;
	vertical-align:middle;
	cursor:pointer; 
	border:1px solid transparent; 
	padding:6px 16px; 
	font-size:14px; 
	border-radius:4px;
}
</style>

Copy Code

The Markup:

 
<form name="formUser" action="RoundedSubmitButton.php" method="post" enctype="multipart/form-data" class="formRounded">
	<table>
		<tbody>
			<tr>
				<td><label>Name *</label></td>
				<td><input type="text" id="formUserName" name="formUserName" placeholder="Enter your name" value="" size="50" maxlength="50" ></td>
			</tr>
			<tr>
				<td><label>Email *</label></td>
				<td><input type="text" id="formUserEmail" name="formUserEmail" placeholder="Enter your email address"  value="" size="50" maxlength="255" ></td>
			</tr>
			<tr>
				<td></td>
				<td><input type="submit" id="formUserSubmit" Name="formUserSubmit" value="Save" ></td>
			</tr>
		</tbody>
	</table>
</form>

Copy Code


Click Here for a Working Example

Sample output

 References

CSS Reference
HTML Table

 


Leave a Reply

I appreciate and welcome your comments. Please keep in mind that comments are moderated according to my comment policy.
Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.