button graphic
Rustom
Status: Interested
Joined: 05 Feb 2010
Posts: 12
Reply Quote
I am trying to make a nice looking button using only hand-crafted html+css and minimal graphics.

Whatever study Ive made seems to indicate that nifty looking buttons require graphics. However this site seems to show nice buttons (eg the new topic and post reply buttons have rounded corners but not preview and submit) and claims to use almost no graphics. So I am mystified.

Disclaimer: If this is too much of a noob question for this forum to answer -- thats ok I wont mind :-). I did try to view source and see the code for/of 'new topic'. Obviously its not going to be in the html but the css.
Back to top
iotaka
Status: Contributor
Joined: 13 Apr 2009
Posts: 85
Reply Quote
The best way is use FireBug (an extension of Firefox) to see how is made a web site. So you can improve your skills. When I see something that is interesting I disassembly it to see how is made :D.
Back to top
techAdmin
Status: Site Admin
Joined: 26 Sep 2003
Posts: 3787
Location: East Coast, West Coast? I know it's one of them.
Reply Quote
CSS now supports rounded corners, but it requires special syntax to work in firefox. These corners won't work in MSIE until MSIE 9 is released.

They do now work on the latest opera, 10.5 I believe, chrome, latest konqueror, firefox has almost always had support using their proprietary css extensions, which were made to support future css 3 tags. That future is now arrived.

The preview/submit buttons are form buttons which I don't bother styling much because only the single user sees them, but you can use the same methods on them.

Using a single background gradient, with curved borders, you can get quite nice buttons with css. If you skip the background gradient image, you can get very nice buttons that are pure code.
Back to top
iotaka
Status: Contributor
Joined: 13 Apr 2009
Posts: 85
Reply Quote
www.webdesignerwall.com/tutorials/css3-gradient-buttons/

this is an example that use heavily CSS3 (not really usable today, is for tomorrow ...)
Back to top
observatuba
Status: New User - Welcome
Joined: 20 Jul 2010
Posts: 1
Reply Quote
You can use the new twitter bootstrap, it's the state of the art CSS framework, and provide many classes to create rounded corner buttons.
Back to top
Display posts from previous:   

All times are GMT - 8 Hours