

Beautiful Buttons for Twitter Bootstrappers - charliepark
http://charliepark.org/bootstrap_buttons/

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

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

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

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

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

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

~~~
charliepark
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...](http://www.broken-links.com/2012/01/11/the-new-and-hopefully-
final-linear-gradient-syntax/).

------
Davertron
Awesome. Can you add sliders for size and padding?

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

------
pacomerh
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...](http://abouthalf.com/2010/10/25/internet-
explorer-9-gradients-with-rounded-corners/)

------
v33ra
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/>

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

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

~~~
charliepark
Just added these in! Thanks for the suggestion!

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

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

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

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

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

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

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

~~~
charliepark
Bah. Sorry about that. Investigating now.

~~~
charliepark
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!

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

------
patja
Very nice...but what about IE8?

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

~~~
tstegart
Is this not going to work in IE 8?

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

~~~
charliepark
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!

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

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

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

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

------
clyfe
Similar: <http://colorfiddle.heroku.com/>

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

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

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

------
mc
This is great. Thanks.

------
cfontes
Thanks very useful...

------
kingkool68
Lickably delicious!

------
miles_matthias
Very nice, thanks!

------
joshwprinceton
this is AMAZING

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

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

------
kenrik
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!

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

------
haberman
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?

~~~
kenrik
It's a code generator, you use it to style your button then use the CSS in
your site.

~~~
haberman
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?

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

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

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

