Comments on: Custom Buttons with CSS

By: derek

derek — Thu, 10 Sep 2009 20:57:56 +0000

Thanks Dan. I’ve committed updates to the code for IE8 using the solution in the link you provided.

By: Jazza

Jazza — Sat, 27 Jun 2009 11:19:13 +0000

Hi, the code works terrifically! Only issue I have found is that in IE8 (not sure if it happens in IE7) when a button is clicked (or active) the right hand image appears a little higher than the rest of the buttons images. I’ve uploaded a shot of how it looks here: http://img530.imageshack.us/img530/7418/65450965.png

Any ideas how I could fix this?

Thanks

By: Dan Rivard

Dan Rivard — Fri, 12 Jun 2009 15:08:17 +0000

Found a viable solution to the IE8 problem in my previous post.

http://labs.findsubstance.com/2009/05/21/ie8-form-button-with-background-image-on-click-css-bug/comment-page-1/#comment-750

The third method, just shifting the active state a little in IE8 only, works for now.

By: Dan Rivard

Dan Rivard — Fri, 12 Jun 2009 14:37:52 +0000

I used the same technique from Filament Group. I also modified it a bit to match some css styled links I’m using. I’m seeing an ugly shift of the sliding doors “end-cap” piece in the active/pressed state on IE8 final, and I get the same results in your git hub example. Are there any updated versions of the code? Is any one else seeing this?

By: derek

derek — Tue, 26 May 2009 13:47:32 +0000

The code is all on GitHub. The code includes the markup, css, and images needed to display the buttons. There is a download link on the GitHub page to get a zipfile or tarball of the code.

By: neki chan

neki chan — Tue, 26 May 2009 07:40:08 +0000

where’s the code for the class~
why didn’t display it in the article
i confuse ><”

By: derek

derek — Wed, 22 Apr 2009 02:48:48 +0000

You can create larger style buttons by adding a new button class similar to how I have two different styles for the round/rectangle style buttons. It is certainly possible to make the height of the button scale dynamically to the size of the text, but it would require more nested spans in the markup, and more complexity. For the moment I think this works good enough for my needs. Feel free to fork on GitHub if you want to experiment.

By: Tiho Lupak

Tiho Lupak — Tue, 21 Apr 2009 08:45:04 +0000

> I’ve updated the examples on GitHub to show examples using icons with the buttons
Oh, I see, you put the icon *inside* the SPAN element :). I always used it only for the text, to better position it inside the button :).
Now there’s only one thing missing: the possibility to scale it’s size, i.e. to display bigger button that stands out from the rest. Of course by adding a bigger icon too (e.g. at various sizes - 32px, 48px, 64px and even 128px) - the rest: size, font, spacing could scale accordingly.

By: derek

derek — Sun, 19 Apr 2009 19:18:08 +0000

I’ve updated the examples on GitHub to show examples using icons with the buttons

By: Tiho Lupak

Tiho Lupak — Mon, 13 Apr 2009 14:28:06 +0000

The redering goes mad if one tries to add a simple icon to the button - like it’s usual and requried in many situations