Buttons

lil_lisa

How do you design your buttons for websites? And where? Photoshop? I'm stuck with Paint.NET and Gimp and it seems impossible to come up with professional buttons for links. They usually look like they've time travelled from the 90s. Anyone any advice on this?

Bob_Harris

<button>I am a button</button> :pac:

Placebo

www.button-download.com
css button maker
http://css-tricks.com/examples/ButtonMaker/#

also if u can get photoshop u cud make ur own with these gradients
http://www.dezinerfolio.com/2007/03/14/ultimate-web-20-gradients-free-download

Bob_Harris wrote: »

<button>I am a button</button> :pac:

Considering IE has problems and hacks out there for PNG, Flash components, and reading DOM elements differently.
I personally will not be touching html5 for a long time

jebuz

Another option is using the JQuery UI library - the buttons are decent and there are a host of icons included

http://jqueryui.com/demos/button/

Pixelcraft

Just for clarification cause apple are to blame for this! CSS3 Has nothing to do with HTML5.

I use CSS to design buttons in (while still designing layouts with buttons in photoshop - just be aware of what you can and can't achieve). These will perform much better than images on all devices, and if you really need those rounded corners etc in older IE's there's js for that, or if needs be feed it a different stylesheet

Bob_Harris

Placebo wrote: »

Considering IE has problems and hacks out there for PNG, Flash components, and reading DOM elements differently.
I personally will not be touching html5 for a long time

The <button> tag is HTML 4

Placebo

Bob_Harris wrote: »

The <button> tag is HTML 4

then your post was pointless ":pac:"

Bob_Harris

Placebo wrote: »

then your post was pointless ":pac:"

It's also a valid HTML5 tag.

previous user

You can design some buttons in flash as well.

Liam Byrne

previous user wrote: »

You can design some buttons in flash as well.

Don't do this if they're for navigation!

Or, for that matter, if you want them to appear on an iPhone or iPad.

cormee

lil_lisa wrote: »

How do you design your buttons for websites? And where? Photoshop? I'm stuck with Paint.NET and Gimp and it seems impossible to come up with professional buttons for links. They usually look like they've time travelled from the 90s. Anyone any advice on this?

You should avoid using images to convey the meaning/function of buttons, they don't translate well to other devices, aren't very accessible and are stripped out in Windows High Contract mode. You're better off using CSS to style them.

DeadlyByDesign

sorry for the ninja hijack, has anyone seen any dog bone shaped buttons on their internet travel have they?

jebuz

http://www.google.ie/images?um=1&hl=en&biw=1280&bih=911&tbs=isch:1,isz:i&sa=1&q=dog+bone+button&aq=f&aqi=&aql=&oq=&gs_rfai=

Placebo

cormee wrote: »

You should avoid using images to convey the meaning/function of buttons, they don't translate well to other devices, aren't very accessible and are stripped out in Windows High Contract mode. You're better off using CSS to style them.

while that is true, i'm not sure i agree with the 'other devices'
with the exception of the ipad, i would not expect my site to render properly on a mobile phone, maybe even an iphone. Depending on the project, i may use different style sheets but over all, i really dont see this as an issue

cormee

Placebo wrote: »

while that is true, i'm not sure i agree with the 'other devices'
with the exception of the ipad, i would not expect my site to render properly on a mobile phone, maybe even an iphone. Depending on the project, i may use different style sheets but over all, i really dont see this as an issue

If you use an image as a button it's hard-coded into your html, so you can't change it depending on the device. If you're using style sheets you can have a button that's designed for that particular device.

tricky D

previous user wrote: »

You can design some buttons in flash as well.

No, just No.

Placebo

cormee wrote: »

If you use an image as a button it's hard-coded into your html, so you can't change it depending on the device. If you're using style sheets you can have a button that's designed for that particular device.

i understand that but unless its a special website, perhaps and org or government related or targeted for mobile users, i would not be avoiding image buttons just because O.1% might view it on an iphone on the bus.

cormee

Placebo wrote: »

i understand that but unless its a special website, perhaps and org or government related or targeted for mobile users, i would not be avoiding image buttons just because O.1% might view it on an iphone on the bus.

I don't understand how the bus is relevant but currently on my sites 5% of people are visiting using mobile devices, and that's a figure that is only going to increase. Using images now is going to cost you later, because you will eventually have to design interfaces for these users, and using images as buttons instead of CSS will mean you'll have to go through every page with a button to change it (to a CSS style) rather than just editing your single instance of the button CSS style. Adding that to the better accessibility of CSS buttons should make it a no-brainer.

Genghiz Cohen

cooltext.com for all my button needs.

lil_lisa

Ok, we came up with these, we flip the image horizontally to get the hover effect. They are images but the text is separately placed on each one and the size depends on the text.

cormee

lil_lisa wrote: »

Ok, we came up with these, we flip the image horizontally to get the hover effect. They are images but the text is separately placed on each one and the size depends on the text.

CSS sprites... v fancy. What you've done (CSS button) is definitely best-practice.