Beautiful Buttons for Twitter Bootstrappers | Hacker News Reader

Beautiful Buttons for Twitter Bootstrappers

charliepark.org

431 pointscharliepark62 comments

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.

And if you're asking "what is?", the answer is probably your copy.

I've stopped doing minor multivariate testing in favor of A/B testing only major changes to a page.

It's just too tempting to play around with color changes all day instead of building my business.

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.

I love the fact that the colour of the text changes depending on the Lightness of the buttons to keep the text more legible!

Watch out! The generated code uses the wrong unprefixed gradient syntax:

  linear-gradient(top, color1, color2)

is wrong. The direction syntax changed to

  linear-gradient(to bottom, color1, color2)

I'll contact the author of the tool.

Thanks so much for the heads-up. Fixed this.

For those interested in this, mindhunter sent me a link on the issue, http://www.broken-links.com/2012/01/11/the-new-and-hopefully....

Awesome. Can you add sliders for size and padding?

Beautiful indeed, but one gripe: The mouse roll-over colors aren't sufficiently different from the button-pressed colors.

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...

Pretty neat. Especially the button text color change according to the background color.

I suppose the generated CSS works pretty much with any templates, not just Twitter Bootsrappers.

Here's another tool which I use it often: http://www.colorzilla.com/gradient-editor/

Thanks a lot for the great tool! It's very intuitive and works well!

Would be nice to have numerical values shown for each slider for reference later. Thanks for this tool!

Just added these in! Thanks for the suggestion!

Also if there was a way to permalink a button, that would be amazing. I like sending links around to people for opinions

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.

Thanks Charlie. (Had to do a hard page reload to see them, though. Chrome's caching is maddening sometimes.)

Very cool. Thank you for putting that up. I'll be using that on future bootstrap projects

I love the bill & teds reference but I like the buttons from http://css-tricks.com/examples/ButtonMaker/ better.

Unrelated: I clicked through to Monotask, liked the idea, but got an error when I tried to sign up for the form.

Me too. Sending an email to them right now...

Bah. Sorry about that. Investigating now.

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).

Thanks!

FWIW, I think I've got it fixed now. It was a third-party javascript issue and the way our code was interacting with it.

Why is this marketed only towards Bootstrap users? This will work fine for anyone. Great tool nonetheless!

Very nice...but what about IE8?

Good call. I'll add a filter: in there.

Is this not going to work in IE 8?

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.

But, in short: It'll still work on IE, even now.

Awesome. That counts as working in my book. As long as it doesn't disappear :)

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!

Doesn't work in IE9 either it seems.

Has this been tested with twbootstrap 2.0? The gradient is messed up when I hover over the button when I tried it on my bootstrap 2.0 site.

It was working for me on the "2.0wip" branch. I'll test it some more, but I'd love to hear if anyone else is seeing any issues.

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.

The ability to edit the HSL numbers directly, or to input a hex and have it convert would be nice. Looks good though.

Similar: http://colorfiddle.heroku.com/

Lovely, but I'm going to be churlish. Couldn't you write this in a more "less.js" style?

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.

I think that's why it's just vanilla CSS...

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.

Another reason is that some people prefer the syntax of Less over Sass. Particularly if they want to work with devs/designers who are used to CSS.

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

https://gist.github.com/1718640

This is great. Thanks.

Thanks very useful...

Lickably delicious!

Very nice, thanks!

this is AMAZING

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's a code generator, you use it to style your button then use the CSS in your site.

Whoops, I meant to make this comment on the Twitter Bootstrap story, not this one ("Beautiful Buttons").

Is Twitter Bootstrap a website theme, or is it intended to be a framework that you can style in multiple ways?

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.

Maybe I'm just being a negative nancy, but anyone who is capable of using bootstrap would probably be able to edit the button values themselves.

Pretty nice to have sliders to quickly and easily dial things just so though.

You'd probably be surprised!

Reply on news.ycombinator.com