Simply-Buttons v2: Create glowing and cross browser buttons

26 Dec, 2009, by appsheriff || Topics: XHTML /CSS

Simply-Buttons v2 are stylish and cross-browser buttons. It is a technique to create glowing and cross-browser buttons that are inspired from how to make attractive buttons with the CSS and rediscovering the button element.

simply buttons v2

The buttons are created with the pure CSS and is optionally improved with the JavaScript. They fit into any text and comes with 3 states such as inactive, active and hover. Their compatibility is tested on the IE6 IE7 FF (PC/MAC) Safari SafariMobile Opera (PC/MAC).

In order to make attractive buttons with the CSS, they have the Sliding doors. Here, if you want the buttons to be uber-flexible then a background image is needed that expands along with the button’s text size. For this, the sliding doors technique is used where there are two complementing images that would create an illusion of a single stretching image.

Then we have the Styling the button. For this, CSS is needed to bring everything together. The IE does not return the buttons to its normal ordinary state whenever it is released. To have this, we have to include a JavaScript to the tag.

For rediscovering the button element, to create a consistent interface for the users is a tedious task for every application designer. Particularly building consistency on the web is very difficult as the visual rendering differences across the browsers and the operating systems are broadly different and arbitrary in what can and cannot be done. And a solution to all these problems will be to create the buttons all by ourselves. For this, we will have to open the Photoshop every time for creating a new button, which is also little tedious. To overcome all these problems, we have the element. It is more flexible and is meant for the designers.

But for this, some requirements are to be met. That is, they have to look like buttons and also look the same across the browsers. The markup needs to be flexible and easy to change for the uses in various situations. The icons and colours are to be used effectively to pass the information about the sort of interaction that will be taking place.

Using the styles that can be applicable for both the type of elements such as links and buttons would provide the required flexibility to keep the means of interaction look consistent and also appropriate whether it’s being done with the Ajax or just a standard submission.

Bookmark and Share

2 Responses so far | Have Your Say!

  1. Very nice, good work folks :)

  2. Thanks McBonio. :)

Leave a Reply