CSS Button

Sunday 14th January 2007

CSS Button

Web design is one of those things that I can easily get addicted to and I've been playing with it a lot recently. Just like I used to at the start of my career in the Internet business.

It was many years ago, soon after I started blogging, that Stuart shared a nice technique with me on how an "RSS" image button can be replaced with simple HTML and CSS. This was a more flexible and bandwidth-saving approach than creating an image everytime a change was required.

During recent experiments with CSS and scripting, I realized that there is much more potential in this method than just an orange link on your site. So why not create an online resource for all these experiments and share it with everyone? This is just what I've done.

Meet cssbutton.com.

Some of the stuff I've come up with:
pakpakistan Lord ofthe Rings xmlatom feed Achtung

On top of all this, I was inspired by this image button maker by Adam Kalsey to create one for CSS. The CSS button maker allows you to generate code for the type of button you want, with the parameters you require. I'll expand it further later on so that the size and other aspects may be also controlled.

I hope anyone with a webpage finds the site useful and interesting. Let me know what you think.

05:15am


On 16th January 2007, at 21:24pm PKT, waqastoor said:

nice work there ... but have you seen one thing in your buttons that when switching browers we see different results ... why dont you use GD library to generate one like that ? ... i mean it would generate a png or gif that would look more cool. and one thing man which editor you use for python ? i am fighting with python but cant find a cool intellisense based editor :(

On 17th January 2007, at 03:28am PKT, 11011011 said:

Nice site. You might want to mention that JavaScript is required on the button maker pages.

On 17th January 2007, at 11:42am PKT, Sajjad said:

Waqas, the whole point of the buttons is that you don't need to use images. There are already a number of button makers out there that generate images. I have yet to check things out using other browsers though.

As for a Python editor/IDE, I just use vim since my development isn't exactly hardcore. The only Python IDE that comes to mind is Komodo, but it's been a while since I checked.

11011011, been a while. JavaScript is only required on the button pages. I did it to simplify generation of the code in the text box. The button maker uses Python CGI and a little JS is used to focus and select the textbox data.

On 18th January 2007, at 02:10am PKT, waqastoor said:

ok but the issue is with Internet explorer that the left side of your button shows small box of color ... what i would suggest that you use the background of the td or div what ever ... not the font :S i hope i am hitting a the right spot :)

On 22nd February 2008, at 12:41pm PKT, Web Designer Group said:

Very useful post and nice work.

On 19th October 2009, at 00:24am PKST, KWdiMMIw said:

tramadol [url="http://www.arkhamgames.com/tramadol_prices.html"]tramadol[/url] http://www.arkhamgames.com/tramadol_prices.html :O cialis [url="http://www.arkhamgames.com/cialis_prices.html"]cialis[/url] http://www.arkhamgames.com/cialis_prices.html iekkfx

On 19th October 2009, at 15:21pm PKST, GknGTxdHItat said:

tramadol [url="http://www.arkhamgames.com/tramadol_prices.html"]tramadol[/url] http://www.arkhamgames.com/tramadol_prices.html hst buy cialis [url="http://www.arkhamgames.com/cialis_prices.html"]buy cialis[/url] http://www.arkhamgames.com/cialis_prices.html myrdao


(not displayed)