Forums

Odd_E

I got the idea to put together a bunch of CSS3 Buttons for future use by anybody. I've started it here:
http://jsfiddle.net/VTLmj/
Add who made it, and then just paste the code in. Hopefully you guys can contribute!

intodesign

hey thanks, can i mail you privately?
I would like to get some advices from you i think you can help me ;)
if so, what is your mail?

Hompimpa

I have an online tool to make CSS3 button. I made this from ButtonMaker :p
Hope this helps.
http://hompimpa.googlecode.com/svn/trunk/CSS3ButtonGenerator-V3/index.html

Odd_E

I don't think you understood what I meant Hompimpa. :-P

kgscott284

http://jsfiddle.net/9bRjw/

There is an updated version!

Hompimpa

@Odd_E: I like Chocolate: http://jsfiddle.net/tovic/VTLmj/4/

Odd_E

Updated: http://jsfiddle.net/VTLmj/6/

Hompimpa

Edit: Oh, sorry. Looks like I started on the wrong editor. This is better. (still the same, just edit it slightly)
http://jsfiddle.net/tovic/VTLmj/7/

Hompimpa

Rainbow Candy... Guess what the flavor!
http://jsfiddle.net/tovic/VTLmj/9/

karlpcrowley

Added

body{
    -webkit-transition: background-color 1s ease;
    -moz-transition: background-color 1s ease;
    -ms-transition: background-color 1s ease;
    -o-transition: background-color 1s ease;
    transition: background-color 1s ease;
}

to make the background toggle look awesome
http://jsfiddle.net/VTLmj/14/

Odd_E

Very cool! Great buttons everyone!

joshuanhibbert

Buttons added: http://jsfiddle.net/joshnh/VTLmj/19/

Odd_E

Thanks Joshua, I may end up using the first one, I really like it.

joshuanhibbert

Go for it!

chrisburton

Whomever made that chocolate button is genius.

therockstar

love all the button great job guys

Cheers!

Hompimpa

@ChristopherBurton: :p

chrisburton

Well done @Hompimpa and that goes for everyone else as well.

chrisjg

2 more added...
http://jsfiddle.net/VTLmj/21/

Odd_E

http://jsfiddle.net/VTLmj/25/

karlpcrowley

Added one, for lighter backgrounds so toggle the background
http://jsfiddle.net/VTLmj/27/

Vermaas

Added one with some nice transitions: http://jsfiddle.net/savver/VTLmj/28/

Odd_E

Guys, put the newer ones on top, not the bottom.

Hompimpa

@Odd_E:

"Things like the description in the CSS files did not they notice. A funny fact is that in our subconscious, we never pay attention to the attribution of a work".

jstam

http://jsfiddle.net/jstam/VTLmj/30/

Added the 3D block button.

Gotta say, Joshua, your buttons are very nice. Well done.

Odd_E

@Hompimpa
I do it as well, just a friendly reminder.

joshuanhibbert

Thanks @jstam!

Odd_E

bump

BryGuy

These are great. The Chocolate one is awesome..... looks just like a chunk of chocolate.... top notch.

Odd_E

double bump

AndyHowells

Good job guys, Rainbow button just made me lol.

xpy

Where is the 'Lego Block'???

amoss

Bump.
http://jsfiddle.net/VTLmj/63/

Hompimpa

@xpy Oh, oh...!!! I like your idea!
Lego Block Button: http://jsfiddle.net/tovic/VTLmj/65/

Odd_E

Very nice buttons!

joshuanhibbert

So box-shadow is awesome: http://jsfiddle.net/joshnh/VTLmj/68/

karlpcrowley

I love the Lego button but I think it should have 8 circles instead of 10 :D

Josh, there's no other word to describe that button other than AMAZING!

karlpcrowley

CHALLENGE - make other UI elements to match the button style
i.e. input boxes, selects, radio buttons, checkboxes etc.

They might need their own fiddles though

Who accepts?

joshuanhibbert

I'll give it a shot if I can find the time Karl.

Hompimpa

@karlpcrowley Oh, I think hmmm..... WARRRRRGGHHH!!! x@
@joshuanhibbert I'll learn from you. Please make something! :)

joshuanhibbert

@Hompimpa I made this a while ago (view in Chrome): http://jsfiddle.net/joshnh/a8NLe/show/

Odd_E

Interesting challenge. I'll try it.

TheDoc

I just want to say you guys are awesome for making this thread happen.

Odd_E

I know I am... (>.>)
Just kidding, but I do plan on making some of the radio buttons for these.

Hompimpa

Doh, so complicated: http://jsfiddle.net/tovic/STZHX/show/
This is not my sKILL level.

chrisburton

@Hompimpa I think you have a future in UI Design

Hompimpa

@ChristopherBurton My KILLer problem: ......
(Duh... what have I said? XXXXX)

codex73

@Hompimpa Awesome! Chocolate UI nice nice. How could this work also in IE?

Hompimpa

@codex73 Even, I don't know whether the range input support in Internet Explorer T_T

cwebbdesign

Love this thread. I know I'm arriving late! Here's my modest contribution - view in the light background http://jsfiddle.net/cwebbdesign/ZcuXJ/8/
That lego is a great use of :before and the sexy button has such a nice hover!

Hompimpa

@cwebbdesign +1
Hehe... "+1" represent the habits of my friends Rudy who say that this is good :P