Drag things, pick colors, make a nice class for your buttons… introducing the Button Maker.
Boy, that’s a nice button right there.
I’m saying “CSS3”, because these make use of gradients, shadows, and rounded corners which contribute greatly to their button-ness. In older browers that don’t support these properties, the fallback is solid-color background, no shadows, and square corners. Not a big deal.
I hope this is painfully obvious, but to use this Button Maker thing, you just adjust the settings until you have a nice looking button, then press the button and it will give you the CSS. Copy and paste at your leisure. Now you can use the class name “button” on HTML elements to make them look like buttons. The CSS isn’t formatted real pretty. If someone has an idea on how to make that better, please do let me know.
The super-awesome empowering concept…
…in regards to how the Button Maker preview works.
It’s easy to change the CSS of an element on-the-fly with JavaScript. But how can we change the :hover state? The answer is that we can’t really, at least not really easily. We could attach a mouseenter event that would apply some new CSS that would override the old, and a mouseleave event that would put it back. That’s a lot of overhead for something so relatively small. It gets even more complicated if we wanted to control the :active state as well.
This Button Maker shows you a live working version of the button you create, complete with :hover and :active states. It is done without attaching any JavaScript events to the button itself. So how is it done? I did it with a technique I ripped off from Doug Neiner who presented it (as small part of a totally different application) at jQConf.
OK OK I’ll get on with it. The idea is to append a <style> element into the <head> which overrides the existing CSS (in-document CSS automatically overrides linked CSS for selectors with the same specificity value). Then when something changes, you literally rip the whole style tag out, and replace it.
Appending a new style:
$("head").append("<style type='text/css'></style>");Text variable where the CSS will be kept. Keep this text up to date when options change.
var cssText = "";Use the replaceWith() function to rip out existing style element and apply a new one:
$("style").replaceWith("<style type='text/css'>" + cssText + "</style>");The ripping-out part is important. Originally I tried putting an ID on the style element and replacing the content within it on the fly. It did replace the content, but those changes were not reflected on the page. Apparently in order to force the browser to re-render with the new CSS, you have to literally remove it and put it back.
Take it, shake it
I’ll provide the source for the thing in case you want to run it locally for whatever reason. Or even better, because you want to make it cooler. If you do, please share.
Nice work from top to bottom. I like all the options you provide and the way you serve up the CSS is way cool too.
Always wanted something like that, it’s too long to type vector gradients by hand.
Wow, that’s pretty slick. Nice work!
Nicely done!
Offhand I’m not sure if this would work, but could you somehow harness the power of http://www.styleneat.com for the CSS formatting? Perhaps a link in the CSS display that would send the user to styleneat.com with the input field pre-filled with your generated content?
If I get a chance I’ll pull down the source and see if’n I can’t work something out. Not sure how easy styleneat is to hook into from an outside source so it may be a bit of a fool’s errand, but who knows?
Nice project. I think it’s better if CSS is well-formatted for readability.
I happen to write my CSS generally in single line format so it works well for me, but I agree it would be nicer in general if it used returns/spaces for readability.
By single line, you mean one line per rule, right? The demo is one line for everything.
this is great. many thanks. thats what i was looking for.
web 2.oh no!
Great tool. Thanks…
This is really cool! Good job Chris
Very sexy Chris :D
Very nice!
Thanks for this helpful (and beautifully done!) tool.
Too awesome Chris!!
Great work and a really cool tool !
Very awesome tool, The Idea of saving so much time^^.
Thanks Chris.
You shouldn’t use !important. It wrecks the “submit comment” button and makes userstyles ineffective.
Are you talking about this specific comment form? What is “wrecked” about it? Looks fine to me.
User styles is an interesting point though. I may look “wrecked” to you because you have your own user styles fighting it somehow? Can’t you just use !important in your user styles to fight against mine? That’s how user styles work right, you are constantly fighting against what is on the page? Or can you just turn off my styles and use your own making the !important stuff moot?
I have my reasons for using !important in places like these. The .button style is generic and doesn’t hold much CSS specificity weight. Yet, I want to make sure my buttons look exactly as I’ve written, so I use !important where I have to, to make sure the cascade doesn’t break them.
Well put!
Takes all of the firebug-fun out of it ;-)
I don’t mind how the CSS is served. I generally write in single line format, as well.
Great tool. I’ll definitely be using it when I forget how to write the annoying webkit gradient.
It’s not that hard to chop it up to multi-line either :)
Another great great idea delivered by Chris.
-..- amazed
Hi: I really like the button maker, i gonna use it in some of my projects.
One little thing to add its a Shadow color picker, cause “the shadow must not be black” :D
The shadow can be a darker version of the background color, or use a darker version of the active background color.
Also if the css can include the IE version of the gradient (ala CSS3 please!) will be a hit ;)
Au contraire, the shadow must always be black with varying opacity. As soon as you start changing the color of the shadow, it will not look right against different colors in the underlying element.
By using a black with partial opacity, you will automatically make each underlying color “a darker version of that color”.
Here’s why. Let’s say you have your button over top of a busy image that happens to contain mainly red, but also contains some yellow and blue. Since it’s primarily green, you’ve set your shadow to be a “darker green”:
Red + some translucent darker red shadow = dark red where the shadow is on the background. Correct visually!
Yellow + some translucent darker red shadow = orange where the shadow is on the background. Not correct. The shadow for yellow should be, as you say, a darker yellow.
Blue + some translucent darker red shadow = purple where the shadow is on the background. Also not correct.
You can see where I’m going with this. When you use low-opacity black, everything underneath is correctly a darker version of its own color.
sorry, the phrase “since it’s primarily green, you’ve set your shadow to be a “darker green” should have green swapped for red. I started out with my example as green, and realized it was easier to explain if I stuck to primary colors. ;) Chris, feel free to make the change directly to the original comment if you want, and delete this one. ;-)
Thanks for a great tool! I am just starting to get over the idea that peeps using IE have to live with square corners and such, but they do have other options ;)
You are great man! I really dont know how to thank you for this useful tool and for all other things you are making…
If ou keep making our life this easy, we’ll soon have to give you a percentage on all our projects!
Tx for making the web a better place!
Wow, Chris this is absolutely amazing, one little thing, could we have :active and :hover gradients.
Thanks
This is damn sexy.
The last time I had a look at an online button maker was ~5 years ago. I abandoned the concept because they were coded in flash – and weren’t half as sexy as your buttons.
Awesome work, thx!
This is awesome, you did such a nice work and all the option you provide to create rounded button is very well.
I like it most.
Touchdown Chris!! I’m sure this one will be very populair once CSS3 standardized.
One question: How come the Jquery .replaceWith() function sometimes makes an extra bunch of stylesheets when the HTML source is viewed in firebug? Is this a some sort of jquerybug or a firebugbug? :-)
Good job, this trick is brilliant. :)
You are a true legend!! This is awesome! Why hide is under css3-button-maker/example – put it on it’s own site… that’s all it needs! :) ahahah it’s fantastic!
I agree, this needs its own site. Nice work.
Thanks, it’s fantastic, you saved me (and others) from alot of work time !
Cheers !
why all the properties are in oneline?
this is a good , really helpful , time saver , hopefully there will be more ideas like these, hmmm… a form would be a good one
Love this! Thanks so much, Chris!
Awesome, this is going to be great tool for some of my web 2.0 projects.
It’s so simple, but perfect – thank you for sharing!
this looks terrible in ie7. no BG color at all.
love to concept. I just wish we could get the ie 6 & 7 users to finally upgrade.
If we as designers and developers move on, the users will move on. We can’t expect them to make the first move.
Even if we dish a bland alternative to the IE users, it should still be done in most cases. Our site, for example, gets the majority of its visitors from universities, the government, and large companies. The users themselves usually aren’t allowed to use non-company browsers, and many are stuck with older IE because their organization is using software which works only with browser X and is expensive to upgrade.
Love it immensely! Yet to test on IE though. Renders fine in Firefox and Safari! Thanks a lot!.
Added your tool as a resource in my CSS aggregator website , hope you dont mind. :)
I added “Quick Copy” to it so it would be easy to grab the code without viewing the stylesheet.
Love the concept!
It’s viewable at http://cl.ly/1Ekb
or formatting the cssText that is entered when clicking the button is another option, but that requires an extra click…
for a simpler way to get the multilines for the out put
Change:
To:
I like your way better!
very nice work love it :)
This is pretty sweet, but the Text Color is not working for me… it changes the Bottom Gradient Color instead?
thanks for your awesome tool.
really impressed with the coding..
its really helpful.
thanks you..
really useful and thanks for sharing.
could you please tell me more about the box that shows the css of the button (how you made it)
Chris,
This is the first comment for me here, so let me thank you for all the things you share here. It sure helped me already and reassured me on a lot of things.
For this specific matter, do you have anything to put as a fallback for IE users? In my country still more than 75% use it… (unfortunately, of course…).
Thanks.
Nice, that reminds me of the one I have online here…
http://dvia.com/buttonMaker
=)
As cool as this is, I still prefer to write my own css just so I keep my skills where I need them. This is the kind of thing that saves time, but tends to make me forget how to actually do it when I need it. I definitely like it thought.
Does this mean we are now going to see this style of button all over the damn place?
Very impressive. Testing it at the bottom of my site’s backup home page at http://lowendmac.com/index.shtml
Looks great in Opera, Safari, iCab, and Firefox on my OS X 10.4 and 10.5 Macs. Degrades well in Camino and IE 5.2 (the last Mac version).
Correction: It’s great in Camino as well. Had to refresh.
That’s awesome, thank you! I much perfer CSS buttons to images, and it’s nice to have a nice reputable place to generate those buttons (try googling button generator and checking out some of those sites).
Thanks again!
NICE! Very very nice!
Simple Multi-line output:
Honestly Chris, one of the most simplistic yet brilliant concepts I’ve seen in months – well done.
Chris, This is freakin awesome! Thank you!
Thanks man!
Wow, this is fantastic, thanks for this!
About formatting the CSS…
Just copy and paste the CSS in
http://www.lonniebest.com/FormatCSS/
and you’r in complete control.
Great tool, but in Opera 10.53 scrollers doesn’t work.
So friggin cool!!
This is a great tool but I think it needs a little work to become backwards compatible with ie7 (at the very least).
net tuts just did a similar tutorial for a css3 button that appears to be fine in ie6 & ie7… however, it’s gradientless, without rounded corners, and no @font-face. But at least it looks sort of like a button.
http://net.tutsplus.com/tutorials/html-css-techniques/build-kick-ass-practical-css3-buttons/
Check the Demo.
Agree! It needs to go back to IE7 at least!
Dam cool Chris. Though there are hundreds of other button maker on web, this one is the best I have seen so far.
You are my new favorite.
Some kind of graceful degradation should be added for IE6-7. Many corporate places are still sadly locked with IE6 for a bit longer.
Very simple way to do that, just specify a background color ;)
Looks like Download Squad heard about it: http://www.downloadsquad.com/2010/06/04/button-maker-lets-you-make-css-only-buttons-for-the-web/
Wow, that’s Nice work!
Thanks for this helpful and awesome tool
Sweet button, really cool tool!!
Cheers!!
Get info–a little over my head–but I’ll get it!
Great tutorial, but the jquery made it a bit confusing but I did manage to get it work. For anyone that wants an easier way to make buttons there are several generators that are also worth trying out such as http://www.generatecss.com and http://www.cssbutton.me