35+ Essential Submit Button Enhancements

Call to action is a term used for elements in a web page that basically request an action from the user. Typically a press on a web page button indicates that a user is making a decision of some kind and buttons are one of the most important building blocks we have to implement call to action. Buttons are for that reason very important elements and they need to be well integrated with the overall design, easy to spot and use. Styling of buttons is typically achieved using CSS and graphic elements but there are a few other techniques available as well. Generally styling html form elements is difficult and is one of the areas where cross browser compatibility may still be an issues when trying to create a design that looks the same no matter what browser is used. This article first cover the basics of using submit buttons on web pages and then dig into more advanced techniques for applying enhancements to buttons to increase how well they “call-to-action” for your visitor.

Advertisement

 

Submit button basics

In order to use the techniques listed in this article you need to know the basics of HTML and in particular knowledge of building HTML <form> structures is essential. Below I have added an introduction that will teach you what you need to get started using the techniques listed below. If you’re already familiar with HTML and building <form> structures you should just skip this sections. In order to create an HTML form submit button, you can use the HTML code below. Basically a submit button is a HTML Input field of type submit:

 <INPUT type="submit" name="mysubmit" value="Click!">

name: specifies the identification assigned to this submit button. value: is the label that appears on the button. The code above will create the submit button as shown below (added as image to avoid css from tripwire magazine template to influence the presentation):

This button will have no function at all as it is not embedded into HTML <form>. I the button is added to a <form>clicking it will load the page specified in the forms action property.The name and value properties of the button that is used to submit the form is passed along with the other data to the server script. For the button above, when you click on the submit button, the data passed to the server side script is mysubmit=Click! If you need to read up on using HTML forms I recommend that you visit w3schools.com HTML Forms and Input tutorial. Changing the look of a submit button is easily achieved with CSS if you stick to the basics like colors and borders. Here is an example creating a css class called “red” that will be applied to input fields. Adding class=”red” to the button will make it pick up the new style.

 

<style type=text/css>
input.red {background-color: #cc0000;}
</style>

<input  class="red" type="submit" value="Submit">

I don’t think it makes sense to go into more details here but I highly recommend that you visit this great css introduction resource if you need more basics: CSS Basics. Another good introduction can be found here: 20: HTML forms—the basics

Button Enhancements

Simply-Buttons v2

Great looking buttons using Sliding Doors Technique. Simply-Buttons v2 is a technique for creating beautiful cross-browser buttons with pure CSS (can be improved with JavaScript). The buttons you will learn to build will look and behave the same way in every browser, fit to any text size, have three states (inactive, active and hover) and finally, they do not need JavaScript to work.

• Buttons size to fit text.
• There are 3 states: Inactive, Active, and Hover.
• They look and behave the same way in every browser and operating system.
• The do not need the javascript to work, they work with just the css
• Way better looking buttons than what anyone else can do with XHTML/CSS, isn’t that reason enough?!

Pushing Your Buttons With Practical CSS3

In this article, the first of the articles that explore practical (and even far-fetched) implementation of CSS3, we start by applying CSS3 to something we all have to create: buttons. Two button concepts are covered – The Super-Awesome Button, Radioactive Buttons

Stop Double Clicks on form submits

This is a small JQuery plugin function which allows you to disable a submit button on the onClick event, while still having the button’s name/value passed to the form. It also changes the value of the selected button when clicked to “Please wait…” or any text you pass over to the settings.

Fancy Buttons Are Here!

Great button technique and explained well in video posts.

Creating and Styling Resizable Buttons

The overall goal of this tutorial is to create and style the button element so that it can handle variable lengths so there is no need for later interventions. This concept is probably familiar to you from various navigation tab styling techniques. We have one long background image:

Designing CSS Buttons: Techniques and Resources

Great article on smashing magazine with tip, techniques and resources for creating great looking buttons.

Beautiful CSS buttons with icon set

If you love clean love clean design and in general simple solutions to design nice and attractive elements for my websites, this tutorial illustrates how to design nice clean buttons using some lines of HTML, CSS code and proxal icon set.

UI technique: changing submit button appearance via background images

“Now every so often, in my applications there will be a fair bit of processing going on after a form submission– enough to make for a delay of a second or more before the browser redraws the screen. This can happen particularly when the form allows for a file upload. And I know people for whom that one-second delay is enough to make them wonder if their click was received. So they click again… and perhaps again… and in the process, send several identical requests up to the server (probably making the page-refresh delay even worse for themselves). So, my solution is to change the state of the submit button after the first click to let them know that there is, indeed, something going on after the first click”

5 Techniques to Style Buttons using Images and CSS

Learn all the common ways to style a button. This tutorial will show how to create a search engine friendly, customizable, and expandable button and also style buttons with CSS sprite.

Preventing multiple page requests after double-clicks

To prevent multiple clicks from sending more than one request, you can use a JavaScript that does up to two things: first, you can use the “return false;” function of a hyperlink or submit button to prevent any click after the first from sending a request, and second, you can change the link or button to a disabled state so that the browser won’t accept clicks and the user can see that a request has already been sent.

<input type="submit" name="save" value="Save" onclick="this.form.submit(); this.disabled = 1;" />

Create an Animated “Call to Action” Button

In this web design and development tutorial, you’ll get a walkthrough for creating a “Call to Action” button sprite in Photoshop as well as how to use jQuery to animate it. This tutorial is broken up into three sections: Photoshop, HTML/CSS, and JavaScript.

Simple Image Submit Button Rollovers with jQuery

Have you ever wanted a simple rollover technique with a form submission button? Something like this:

… without having to resort to a complicated mess of javascript form submission and cross browser compatibility issues? With jQuery it’s really easy

How to make sexy buttons with CSS

This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day.

The ULTIMATE Submit Button REVEALED!

See how Eric Graham, “The Conversion Doctor” creates what he likes to call “The ULTIMATE Submit Button”! He first noticed a border around a submit button about 4 years ago when he saw it on Google’s Adsense Log-in page. Since that time he tested several different variations and colors of borders around submit buttons and in most cases a red border converts best.

Progressive Enhancement: Custom Styled CSS & HTML Input Buttons

Rediscovering the Button Element

Creating a consistent interface for your users is a constant struggle for every application designer. Building consistency on the web is especially tough because the visual rendering differences across browsers and operating systems are wildly different and almost arbitrary in what can and cannot be done. No where does this become more apparent than when you’re dealing with form elements and the biggest loser of them all in the battle for a standardized look is the infamous Submit button.

CSS Oval buttons

These buttons use the sliding doors technique of CSS, plus two sliced background images with “on” and “off” states.

Style your Form Buttons with Only CSS and Zero Javascript

show you how to style submit button without any JavaScript and how to make rollover effect! can you believe it ZERO JavaScript and tested on all browsers.

Scalable CSS Buttons Using PNG and Background Colors

Create dynamic CSS buttons using PNG, transparency and background colors that degrades nicely and supports full scalability. With full scalability it means it should resize in all directions according to the font size and content.

Transforming the Button Element with Sliding Doors and Image Sprites

In this article, you’re going to learn how to transform the buttons image from fixed to flexible and good looking using HTML and CSS.

Make fancy buttons using CSS sliding doors technique

This article will show you how to create fancy buttons using CSS sliding doors technique. It is much better to use this technique than to use image buttons because you can apply the style to any link and at the same time you don’t have to create an image for each button.

3D CSS buttons

By using an element’s border-style CSS attribute to outset, you can easily create a 3D looking button. Taking it one step further the button can also appear depressed if desired, by switching from a border-style value of outset to inset.

Pressed Button State With CSS

The active anchor state is the state an anchor (a link) is in when you click on it. The moment you click on a link, it becomes active. You will use the “hover” or “visited” states in this tutorial, but the active state can come in very handy when you’ve got custom styled buttons.

CSS Sliding Door using only 1 image

In this tutorial, you will be shown how to code the navigation bar using only 1 image, making it user friendly and uses less CSS code.  The buttons are designed to look very similar to basic HTML input buttons. But they can handle multiple interactions with one basic design. The buttons we’re using are imageless, and they’re created entirely using HTML and CSS, plus some JavaScript to manage the behavior. They’re also easily skinnable with a few lines of CSS, which was a key factor now that Gmail has themes.

Roll Over Button

In this XHTML CSS tutorial you’ll learn how to create a button for a web page using Photoshop, XHTML and CSS. More specifically, you’ll learn how to create a button who’s hover state image is preloaded. The advantage to this technique is that upon hovering over your button, the user won’t have to wait for it’s hover state image to appear; there’ll be no ‘graphic-less’ moment while the image loads, all without a single line of JavaScript.

Liquid & Color Adjustable CSS Buttons

When working on a large site with multiple buttons, it can be quite tedious to make all the buttons in Photoshop. Making future adjustments on the verbiage and colors can be also time consuming. By having dynamic buttons, this scenario is much easier to handle, and by having liquid and color adjustable buttons with CSS, we are able to change the verbiage and colors with ease.

Rounded Form Buttons

To be precise, the submit buttons: input type="submit". Very often designers want to somehow emphasize these buttons and are not very pleased with an answer “well, how about bold and colored caption?”

CSS Hover Button

In this tutorial, to start with, you will need to make an image in two different states (state number one will be the natural state and state number two will be the hover state) and bring the button altogether with CSS.

Submit button should look same everywhere

When some one works on a website design, it is important that the look will remain same in all browsers. But creating a consistent interface for users is a constant struggle for every application designer. Building consistency on the web is especially tough because the visual rendering differences across browsers and operating systems are wildly different and almost arbitrary in what can and cannot be done.

CSS Overlapping Arrow Buttons

“I was recently asked to create arrow buttons for a step-through type of navigation. At first, from a CSS standpoint, it seemed like trying to fit a triangle peg in a square hole. But with a little creative maneuvering I was able to work it out. I’m sure there are many ways… but here’s my approach.”

Pure CSS Buttons v1.0 by Halmat Ferello

This is simple and effective way to have buttons that scale (width-wise) without any weird browser-specific CSS (apart from IE6/7) or JavaScript implementations. Just using pure CSS goodness. And since we should care about the user, the buttons also offer feedback – hence different images for :hover, :active CSS events.

CSS image replacement for submit buttons

Expanding the techniques for CSS image replacement by Mike Rundle and Seamus P. H. Leahy, and inspired by a question posted to the WebDesign-L mailing list, I have developed an image replacement method for submit buttons, and in general for the button tag. Using this method you’ll get a clickable image when style sheets are active, and a standard button when style sheets are off. The trick is to apply the image replace methods to a button tag and use it as the submit button, instead of using input. And since button borders are erased, it’s also recommendable change the button cursor to the hand shaped one used for links, since this provides a visual tip to the users.

Simplest transparent css submit button ever

Really simple submit button and a good description on how to implement it.

Update: Styling the Button Element with CSS Sliding Doors – now with Image Sprites and IE 8 Support

We dusted off our original sliding doors button to give it a much needed update. The button now works with image sprites thanks to the CSS contributions of Louis Walch, and also works with a single block of CSS (we’ve removed the now unnecessary conditional comments for IE) in all major browsers including IE versions 6 through 8.

Inspiration

Call to Action Buttons: Examples and Best Practices

How can we create effective call to action buttons that grab the user’s attention and entice them to click? We’ll try to answer this question in this post by sharing some effective design techniques and exploring some examples.

Showcase and Tips: How to Create Effective Landing Page Designs

This article provides essential tips and examples on creating Landing Pages that work. Buttons that call to action is a key element here!

4 Simple Design Elements Behind a Good Call to Action

Create Clean and Fresh Call-to-Action Button + Embossing Text Effect in Photoshop

In this tutorial, I will show you how simple it is to create effective, clean and fresh call-to-action button that will surely attract visitor’s attention, plus a super quick way to create this trendy Embossing text effect in Photoshop. Very easy tutorial, have a try!

Are you looking for 642-736 exam help? Download the latest 642-972 dumps and other resources to pass EC0-349 exam on first attempt.

Do you have a Ebook reader? There is a lot of awesome Nook color covers that will personalize and protect your Nook color. Optimize your search engine ranking easily with Traffic Travis and the little known loopehole technique.