Open Source Resources for Web Application Developers

The author of Button-Download.com has been keeping the buttons he made in the past. Now he has released all of them to us. All of the buttons are in PNG and PSD format, so that you can edit the buttons as you like. You are free to use these buttons your personal and commercial projects. To make your life easier, you can also download these buttons all at once by clicking the “All Download” button as well.

Requirements: -
Demo: http://www.button-download.com/
License: License Free

• 1 Comment

If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you mouseover on it, the icon on the left “jumps” for a few times. The animation looks really attractive.

Janko is going to show you how to create the Skype-like Buttons using jQuery and some simple CSS. The code is tested in Firefox, Safari and IE7.

Requirements: jQuery Framework
Demo: http://www.jankoatwarpspeed.com/examples/skype_buttons/
License: License Free

• 4 Comments

Until some future version of HTML gives us new native controls to use in a browser, at Google, they have been playing and experimenting with controls they call “Custom Buttons” in their apps (among other custom controls). These buttons just launched in Gmail and Google Reader recently.

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.

Requirements: -
Demo: http://stopdesign.com/archive/2009/02/04/recreating-the-button.html
License: License Free

• 8 Comments

Flying People has released 20 Free Sunny Glossy Buttons created by Jay K to use on you blog, website and online-store. The gradient of the buttons looks so beautiful. If you need some web2.0 badges or buttons, it is really a very nice choice.

* The Buttons are no longer available for download *

Requirements: No Requirements
Demo: http://www.flying-people.com/2007/10/10/20-free-sunny-buttons/
License: License Free

• 7 Comments

Another development kit from Bartelme Design. it’s basically a Photoshop file ready to use, adapt and reinterpret for creating beautiful buttons. It is really nice and useful as usual. Those buttons can be used on both personal and commercial websites etc. Enjoy.

Requirements: No Requirements
Demo: http://www.bartelme.at/journal/archive/button_devkit
License: License Free

• 0 Comments

As we know, the input with the type=”submit” is either too ugly (Firefox), a little buggy (Internet Explorer) or completely inflexible (Safari). The solution for most is to use image inputs and create the damn things ourselves. And it’s unfortunate, because then we’re reduced to the tedious tasks of opening up Photoshop every time we’re in need of a new button. What we need is something better—something more flexible and meant for designers. Lucky for us, the solution already exists. ParticleTree introduced us a better way to do it, also with mouseover and mouseout effect.

Requirements: No Requirements
Demo: http://particletree.com/features/rediscovering-the-button-element
License: License Free

• 2 Comments

Hedger Wang teaches us how to create rounded corner buttons with only One Image and One CSS file. Users can see different state of the buttons, e.g. disabled, mouseover and mouseout state. So that the users can feel more interactive with the website or web application. We can also use this technics to create Wii-like buttons.

Requirements: Internet Explorer 5.5+, Safari 2, Firefox 1.5+, Opera 9.
Demo: http://www.hedgerwow.com/360/dhtml/css-round-button/demo.php
License: GPL License

• 16 Comments

Alex Griffioen teach us how to create pretty looking textual buttons (with alternate pressed state) using CSS. Alex Griffioen uses sliding doors technique; two complementing images creating the illusion of a single, stretching image to create dynamic buttons which save you heaps of time on creating different graphics for different states of the button.

Requirements: Any Modern Browsers with CSS Support
Demo: http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons…
License: License Free

• 3 Comments

In many cases when we are developing a web site or web application, our traget market might not only be one country. We might provide different version for various people in different region or country. Here is a Flag Button Developement Kit created by Bartelme Design. We can create different flag buttons for different country easily.

Requirements: No Requirements
Demo: http://www.bartelme.at/journal/archive/flag_button_devkit/
License: License Free

• 4 Comments

David’s Kitchen wrote an article: Scalable CSS Buttons Using PNG and Background Colors taught us how to create dynamic CSS Buttons using PNG, transparency and background colors that degrades nicely and supports full scalability.

It is really handy for developers because the length of the button will be changed according to the length of the text. The buttons are very pretty with Web 2.0 style. The color of the button changed if you hover on it. However, the buttons are not looking very nice in Internet Explorer 6.0, hope there is a version which supports IE 6.0 as well soon.

Requirements: Internet Explorer 6.0+, Firefox 1.5+
Demo: http://monc.se/kitchen/stew/buttons/btn.html
License: No License

• 1 Comment