I can't count how many times I've handcoded button colors, so thanks for this timesaver.
But I'm actually more interested in a deeper aspect here: what will button colors do to my conversion funnel? So here's an idea for a weekend hack: I would pay money for a PnP button A/B testing solution that automagically converged to statistically optimal colors.
The mechanics of A/B testing math make implementing this a much less attractive proposition than you'd think it would be. I'm going to get handwavy but it will suffice for the moment: the amount of traffic you need to get statistical significance between N options grows at like O(N^2). How much of the color-space do you want to automatically converge over?
Most of my clients would struggle getting results at sufficient velocity with 10-way multivariate testing to say nothing of zomg-way multivariate testing.
Totally separate problem: Button color is far from the most salient thing you could be testing.
Yup. We wasted a considerable amount of time going for silly optimizations like this when we should of been trying changing the entire copy and layout. It felt like we were doing something when in fact we were just spinning our wheels.
Me too. Major changes tend to have higher impact and provide more/faster learning. What exactly do I learn if I find that one color gives me 0.4% more conversions?
So it's not quite what you're asking for, in that you'd probably need to add something to automatically generate many color options or whatever, but http://www.mynaweb.com/ seems close and uses better math than A/B testing anyway.
Handy project, one important thing though, these buttons don't look right on IE9. This because IE9 that doesn't allow to combine gradient + rounded corners at the same time. If you which to add a solution for this please check this page using SVG as a background. http://abouthalf.com/2010/10/25/internet-explorer-9-gradient...
Nice. One suggestion: add color presets. I know there are others who have commented on cookie cutter designs, but for those of us without innate design skills and a budget to hire a designer for each button we want, preset color schemes are a godsend.
I'm not sure if this is quite what you're going for, but I've added a bunch of sample buttons at the bottom. You click on one and it should adjust the sliders, and you can tweak it further, as you like.
Okay ... I'm still looking into what might be happening with it, but to make it up to you: any of you who e-mail me at charlie@monotask.com will be put on an "extra-advance" list. Be sure to let me know whether you're on a PC or a Mac (or Linux).
At the moment, it'll show the correct background color, but won't show the gradient. That is, if you slide the "puffiness" slider all the way to the left, that's what the buttons will look like on IE. I'm hoping to get that IE filter in there this afternoon. Will update here once it's deployed.
Update: I've added in the "filter" line, so it should work in IE as well. I don't have a way to test it, though, so if any of you have IE running and can confirm that you do, in fact, see a gradient on the buttons, I'd appreciate it.
If it doesn't work for you, rather than posting here, e-mail me, at charlie@monotask.com. Thanks!
Just to update, I've pulled all of the latest Bootstrap docs, and it's working for me, in both the 2.0-wip and master branches. I'm curious if you're still having trouble with it. E-mail me (charlie@monotask.com) and I'll see if I can figure it out.
I was thinking the same thing, here's a quick less interpretation i put together of the generator... not sure it's 100% accurate but it should do the job
One would have to wonder why you would choose less.js over sass. In that case, you'd probably have to add support for both (at least it'd probably be requested), which in the end would add to the complexity of this little tool.
The reason to choose less over sass would be because that is what twitter bootstrap uses, though using plain CSS does have the advantage of being used elsewhere.
2 suggestions: 1) A fallback for IE7 and IE8 (maybe just the main color without the gradient?) 2) A "generate link" button, that basically generates an URL to the current custom button.
I'm pretty sure it's got the fallback (your #1) in place, but let me know if it looks like that doesn't work for you. Your suggestion for #2 is great. I'm not positive I'll have the time to develop that, but I'll see what I can do.
It's a nice little tool, "Slick".
However I'm not a big fan of using this type of "easy" tool as just about everyones stuff ends up looking the same.
A good illustration of this fact:
Cars, what's the difference between a 370z and a Porsche Cayman? Well the 370z won't turn as many heads because you see them all the time.
It takes time to make a nice custom button/graphic/logo but it is time is well spent!
I guess the question is how much of a difference it makes to use a generator/template and designing your own everything. Especially early it's easy to make the argument of save money and time to get it done.
I'm having trouble understanding exactly what this package provides; is it essentially a website "theme?" If I use this, will my website necessarily have the same design look as this website?
It is intended as a framework that you can use as a base style to build your website. Examples of it being used differently here: http://builtwithbootstrap.com/
However, the biggest gripe that people have with it is that the default styling just works - and many people tend not to bother changing that.
But I'm actually more interested in a deeper aspect here: what will button colors do to my conversion funnel? So here's an idea for a weekend hack: I would pay money for a PnP button A/B testing solution that automagically converged to statistically optimal colors.