tripwire magazine

Typically a press on a web page button indicates that a user is making a decision of some kind. 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. This article first cover the basics of using submit buttons on web pages and then digg into more advanced techniques for applying enhancements to buttons.

This article does not cover styling of image links that is closely realted to styling of submit buttons but usually used for menu navigation. I have covered CSS techniques for navigation in a previous article that you may want to look at – 100+ Massive CSS Toolbox.

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:

1

 <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 funtion 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 acheived with CSS if you stick to the basics like colors and broders. 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.

1
2
3
4
5

<style type=text/css>
input.red {background-color: #cc0000;}
</style>
 
<input <span style="color: #0000ff;"> class="red"</span> 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

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”

Submit A Form Without Page Refresh using jQuery

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.

1

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

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.

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.

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

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.

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.

Related posts:

1. 25+ Extensive List of Essential Pop-up Window enhancements This article provides an extensive list Essential Pop-up Window enhancements...
2. 45+ Really Essential Free HTML [Form] Enhancements Easy user interaction and data collection is really a...
3. Howto: Wordpress 2.7+ User Link Feed Submit Form and Widget In this article tripwire magazine provides a mini-tutorial on...
4. 50+ jQuery Plugins for Form Enhancements Easy user interaction and data collection is really a...

SHARE THIS!

Please help tripwire magazine and share this post is you liked it...