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.
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.
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.
To meet these conditions they developed their technique – a cross-browser method for styling button elements with sliding doors.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 »