35+ Essential Submit Button Enhancements

June 19, 2013 · 40 comments

by Lars

submit-button-conversion 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.


ElegantThemes
ThemeForest

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): slideshow 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">

slideshow

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: CSS3 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?!

simply

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

image

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.

image image

Fancy Buttons Are Here!

Great button technique and explained well in video posts.

image

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: image

Designing CSS Buttons: Techniques and Resources

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

image

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.

slideshow

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”

slideshow

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.

image

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.

image

Simple Image Submit Button Rollovers with jQuery

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

slideshow

… 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. image

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.

slideshow

Progressive Enhancement: Custom Styled CSS & HTML Input Buttons

image image

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.

image

CSS Oval buttons

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

image

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.

slideshow

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.

image

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.

image

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. slideshow

slideshow

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.

slideshow

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.

slideshow

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.

image

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.

image image

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.

slideshow

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.

slideshow

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. slideshow

Simplest transparent css submit button ever

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

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. image

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! image

4 Simple Design Elements Behind a Good Call to Action

image

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!

image

{ 24 comments… read them below or add one }

Dave June 27, 2013 at 8:30 am

yes some awesome buttons here thank you !

Reply

michel317 June 19, 2013 at 12:44 pm

hi you all

Reply

Johny February 24, 2013 at 3:35 pm

Perfect!!! This realy helped me! keep it up! You are amazing

Reply

bibin January 14, 2013 at 6:39 pm

Nice . please keep it up…thanks

Reply

Raymond December 31, 2012 at 9:51 am

good example…

but I still suggest that…
http://css-button-generator.com/

it is easy to create CSS

Reply

Prscilla January 2, 2013 at 3:37 pm

oh!! thanks, it is useful.
But why my button have no shadow??? when I change the bar???

Reply

Ashi October 11, 2012 at 5:46 pm

Really very nice and useful post.
Thanks

Reply

Hyder October 7, 2012 at 4:57 pm

“http://halmatferello.com/lab/pure-css-buttons/#” is not opening…

Reply

annesofie October 11, 2012 at 10:27 am

Thank you for making us aware of the problem. We have corrected the link so it should work now :)

Best regards, Sofie

Reply

Hyder October 7, 2012 at 4:56 pm

Very nice yaar. I was searching in google image :p

Reply

Peter Sundstrom September 19, 2012 at 5:26 am

Definitely the best round up of styling submit buttons that I managed to find. Great job.

Reply

cheap custom jerseys May 19, 2011 at 10:15 am

I like it very much, thank you

Reply

Earlean Mateo February 9, 2011 at 4:53 am

This web page can be a walk-through for all the information you wanted about this and didn’t know who to ask. Glimpse here, and you’ll undoubtedly discover it.

Reply

Microcontroller Programming · November 7, 2010 at 10:20 pm

article marketing would always be my choice when i want to sell products online “

Reply

Natalie White September 30, 2010 at 11:24 pm

article marketing is great but it also takes time since you have to create lots of original articles*`*

Reply

hermes handbags July 9, 2010 at 11:23 am

Any marketing device be it with materials such as postcard printing or digital such as websites should have a call to action. This tutorial is really helpful for those who are designing websites. Button design says a lot to me about the websites I visit. Squared off, old looking buttons give me the feeling that the business the site represents is behind the times, low tech, not advancing, and may not be ready to meet my needs. Seems like a small thing but it says a lot.

Reply

MediaTech April 15, 2010 at 2:38 pm

wow, this is brilliant!, thanks for this

Reply

Postcard Printing March 15, 2010 at 7:30 am

Any marketing device be it with materials such as postcard printing or digital such as websites should have a call to action. This tutorial is really helpful for those who are designing websites. Button design says a lot to me about the websites I visit. Squared off, old looking buttons give me the feeling that the business the site represents is behind the times, low tech, not advancing, and may not be ready to meet my needs. Seems like a small thing but it says a lot.

Reply

Bonx March 10, 2010 at 2:40 pm

Tip to all: Always always show buttons are clickable with css:

cursor:pointer;

So many people forget to do this and although its a button so should be obvious having the cursor change just gives it that little extra :)

Reply

tripwire team March 10, 2010 at 6:55 pm

@Bonx, thanks for the tip!

Reply

Amberly | Web Designer March 4, 2010 at 6:46 pm

Nice post …. Keep the CSS3 Tutorials Coming :D

Reply

lono creative March 4, 2010 at 4:41 pm

nice collection, simple buttons work best i feel

Reply

Thomas Craig Consulting March 4, 2010 at 12:24 pm

Nice collection, thanks for the share.

Reply

SCMIND March 4, 2010 at 5:23 am

Very helpful article. Thanks for the post!

Reply

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>

{ 16 trackbacks }

Previous post:

Next post:


Web Analytics