15 Tips and Techniques for Styling the button element

Lets be honest, most of the form buttons that you come across are ugly, they work as intended, but really, really look awful.

There are reasons for this, firstly form buttons, as with almost anything to do with forms, are notoriously tricky to style with consistency, and secondly, styling can cause major problems with cross browser and cross platform compatibility.
The button element defines the submit button. Designers may choose to use the input element to specify these buttons, but are limited to only very basic styling. For richer and prettier buttons the obvious choice is the button element, which offers richer labels, including images and emphasis. It is this element this article focuses on.

In this article we highlight 15 methods and techniques for improving the styling of your form button.

Super Awesome Buttons with CSS3 and RGBa

With a little more refinement, you can make your html buttons look more actionable and refined while maintaining the ability to function as a button across browsers.
With a little CSS3 magic, you will learn how to create a scalable set of buttons with nearly half the CSS it would have taken with hex colors, all made possible by a transparent PNG overlay (for the gradient), border, border-radius, box-shadow, and text-shadow.

Simply-Buttons v2

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.

Creating and Styling Resizable Buttons

You can easily apply image replacement techniques to buttons and make your form look good. Most interesting feature is that BUTTON element may have content.
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. Basically, you'll treat the button element as a container and add some markup.

Styling the Button Element with CSS Sliding Doors

When developing this button technique, the developers requirements were as follows: use the sliding doors method introduced on A List Apart, allow the use of HTML text for the button labels so that you could reuse the same button style many times and, finally, that it does not require JavaScript for form submission or rollovers.
To meet these conditions they developed their technique – a cross-browser method for styling button elements with sliding doors.

Custom Styled CSS & HTML Input Buttons

This method uses a standard HTML <button> tag, pure CSS for the graphic customisation and no JavaScript. To keep things neat it uses a single image tiling across the background of the button.
This solution allows for a completely custom design to be applied to the button, while retaining the ability to use HTML text on the button itself, and the button will automatically expand or contract depending on the length of the text on the button. It will also gracefully degrade on older browsers with no CSS or JavaScirpt support.

Style your Form Buttons with Only CSS and Zero Javascript

This is perhaps the easiest and simplest method I could find for styling the button element.The tutorial shows you how to style a submit button without any JavaScript and how to make a simple, yet effective, rollover effect that works in all browsers.

Rediscovering the Button Element

In this timeless and in-depth tutorial (ok, it is only two years old), the author demonstrates his method for styling the <button> element with the following requirements: They have to look like buttons, cross browser compatible, the styles for the button need to be consistent with the sites links, the markup needs to be flexible and easy to change, and finally, to be able to use icons and colors effectively to pass information about the kind of interaction that would be taking place.

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.
You will create a a cross-browser, flexible and attractive button using the sliding doors technique and image sprites for fast hover changes and less HTTP requests.

Rounded Form Buttons

To be more precise, this article tackles the submit buttons ( input type="submit"). Very often designers want to somehow emphasize these buttons and are not very pleased with the answer “well, how about bold and colored caption?” This tutorial offers a solution.

5 Techniques to Style Buttons using Images and CSS

This tutorial demonstrates five techniques for creating a search engine friendly, customizable, and expandable form button and how to style the buttons with CSS sprites.

Replacing Form Buttons with Images

So, you want to use CSS to style a form button to appear as an image, similar to the way you would with any anchor link (using background-image). While the process in this tutorial is very similar, there are a few odd behaviors that form buttons exhibit that anchor links do not (particularly when viewed in IE6) that require a little extra CSS tom-foolery to get around.

Styling Buttons to Look Like Links

Ideally, you shouldn't mess too much with browser defaults for functional things like form controls, scroll bars etc. Sometimes, though, you just have to build what your designer or client tells you to.
It actually isn't hard to make a submit button look like a link using CSS so you should never find yourself in a position where you have to sacrifice forms for links purely for the sake of the design.

Styling Even More Form Controls

This article, from 456 Berea Street, is a reference that shows how differently form controls are rendered by different web browsers and operating systems. It also shows that very little can be done to make form controls appear the same across browsers and platforms. That said, the author demonstrates some basic tips for button styling.

Styling the Button Element in IE

If you’ve ever attempted to style a button inside IE, you know that it can be a huge pain. One of the first things you might notice when you bring your nicely styled buttons up in IE is that IE decides to stack the padding depending on the width of the content inside the element.

Styling Form Buttons

Buttons, as with most form controls, can be a bit tricky to style for consistent look cross browser and cross platform as the operating system often has more to do with how they are rendered than the browser itself. In this article, Roger Johansson, shows you a few different options available for styling your buttons.

Recreating the Button

This article is not specifically a tutorial, it is more of an overview and the thought process of Douglas Bowman and his and contribution into reinventing the browser button controls at Google, as seen in Gmail.
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 Google are using are image-less, 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 is a key factor now that Gmail has themes.

You might also like…

25 Tutorials and Resources for Learning jQuery UI »
Creating a Web Development Environment using Google Chrome Extensions »
10 Online Tools and Apps to Help Optimize and Format CSS »
CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes »
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
50 Useful Tools and Generators for Easy CSS Development »
20+ Resources and Tutorials for Creative Forms using CSS »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »
15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials »

RSS & Share

• Subscibe via RSS
• Follow us on Twitter
• SDM on FriendFeed
• SDM on Facebook
• Del.ici.ous Bookmark
• Stumble Speckyboy!
• Follow us on Digg

Worthy Links

• StylesInspiration
• Smashing Magazine
• Design Reviver
• N.Design-Studio
• WebDesigner Depot
• Blog.SpoonGraphics
• Spyre Studios
• Six Revisions
• Vandelay Design
• Web Design Ledger
• Onextrapixel
• DesignerFix
• 1stWebdesigner.com
• Pink Moustache
• ShortRunCards.com

Categories

• Ajax/Javascript
• Cheat Sheets
• CSS
• Firefox Extensions
• Fireworks Extensions
• Fonts
• Free Icons
• Graphic Design
• Icon Design
• Logo
• Patterns
• Photography
• Photoshop
• Showcase
• Tutorials
• Typography
• Vector
• Web 2.0 Apps
• Wordpress
• Wordpress Plugins
• Wordpress Themes
• • View Archives »

We are a proud member of the...

Are you one of our Facebook fans?

We are optimized by...