Html vs CSS

Published on June 3rd, 2010 | by Noah

9

Customize Your Form Buttons with a Little CSS

A common support request we receive is customers needing a little help customizing the look of their forms using CSS. Specifically, we often get questions about how to make the submit button at the bottom of their forms look different, or better conform to their website’s color scheme. Today, I thought I would go over a little light CSS that you can use to jazz up your submit buttons. (Some of the CSS selectors I’ll use are specific to Formstack, but the CSS code can be reused for any HTML form.)

Html vs CSS

Image by eelke dekker

In order to add custom CSS to your form you will need to either add this CSS to a form Theme inside Formstack or add it directly to your website (if you are embedding your form on your website).

1. Text Buttons

Our first example changes the basic colors and spacing of the default submit button. Take a look at the CSS below:

.fsSubmitButton
{
	border-top:		2px solid #a3ceda;
	border-left:		2px solid #a3ceda;
	border-right:		2px solid #4f6267;
	border-bottom:		2px solid #4f6267;
	padding:		10px 20px !important;
	font-size:		14px !important;
	background-color:	#c4f1fe;
	font-weight:		bold;
	color:			#2d525d;
}
  • The CSS class of .fsSubmitButton is the class of the submit button itself.
  • Occasionally, you’ll need to add the “!important” tag to some styles if they don’t appear to work. This tag forces the web browser to use that style over all others. This can be an issue if there are other CSS rules already set for your submit button.

Of course, you can modify this CSS to use colors specific to your website. The above CSS rules will make your button look like this:

2. Graphic Buttons

Another popular method of styling submit buttons is to use a graphic instead of changing individual button styles. If you are able to create a button graphic and host it on your website, you can use CSS rules to use the graphic as your button instead of the default button.

.fsSubmitButton
{
	background-image: 	url(signup.png);
	background-repeat:	no-repeat;
	background-color:	transparent;
	height:			66px;
	width:			182px;
	border:			none;
	text-indent:		-999em;
}
  • The “url()” part of the rule will contain the link to your hosted button image.
  • The height and width rules will change depending on how large you make your button image.
  • The background-color and border rules are set to turn off the default button style so only your button image is visible.
  • The text-indent line pushes the default button text off the screen so your button image can be seen clearly. This method allows screen readers to still find your button text.

These CSS rules would make our submit button look like this:

As you can see, we are only scratching the surface that the many possible ways you can style your submit buttons. Sometimes the best method is to play around with different styles and values until you get the look you want. Before we close out this post, here’s the CSS for 2 additional form buttons. We’ve styled these very nicely so that you have a great starting point for your new online form.

Button Style 1

.fsSubmitButton
{
padding: 10px 15px 11px !important;
font-size: 18px !important;
background-color: #57d6c7;
font-weight: bold;
text-shadow: 1px 1px #57D6C7;
color: #ffffff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #57D6C7;
cursor: pointer;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

Button Style 2

.fsSubmitButton
{
padding: 10px 20px 11px !important;
font-size: 21px !important;
background-color: #F36C8C;
font-weight: bold;
text-shadow: 1px 1px #F36C8C;
color: #ffffff;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border: 1px solid #F36C8C;
cursor: pointer;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

 

Want more tips on form buttons?

Check out our video with 7 steps to better your submit buttons, and learn all about form button optimization.
optimizing your form buttons

 

 

 

 

 

 

Image credit: Chris Glass

Tags:

About the Author

(@noahcoffey) is a UX Developer at Formstack who enjoys wearing both web designer and developer hats. With a BS in Media Arts & Science from IU Informatics and a slight obsession with social media and APIs, Noah contributes to both the Formstack application and provides development support to marketing initiatives. When not working on the web, Noah enjoys being a father, camping and tailgating with his wife.

9 Responses to Customize Your Form Buttons with a Little CSS

  1. Steve Benjamins says:

    This does not work in IE 8 at all.

    Any ideas?

  2. Alice says:

    Me too in any IE at all.

  3. Liza says:

    IE is ancient, though… Upgrade your browser. xD

  4. Fadhly says:

    Thanks! Very helpful.. :D

  5. Oleg Sledov says:

    If you approach matters professionally, “upgrade your” browser just makes no sense. But if you hardcode assign the class to the button, it will display correct in every browser. The explanation in this article is great. Thumbs up!

  6. Noah says:

    Hey Noah,

    Cool site, I really like the graphic css button. It helped me out a ton.
    Thanks.

    -Noah

  7. Aditi says:

    Sir,
    please let me know if i use this css button in a form then how do i send the information typed in the text boxes by the user to a servlet?
    for the nomal submit button we use:

    how do i do that with these buttons?

  8. Eva says:

    Hi there,

    Our support team can help you navigate this question. Please reach out to them at support@formstack.com.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Back to Top ↑