8 ms·
Beautiful Buttons for Twitter Bootstrappers
- kingkool68 15y agoLickably delicious!
- adhipg 15y agoI love the fact that the colour of the text changes depending on the Lightness of the buttons to keep the text more legible!
- patja 15y agoVery nice...but what about IE8?
- charliepark 15y agoGood call. I'll add a filter: in there.
- tstegart 15y agoIs this not going to work in IE 8?
- charliepark 15y agoAt 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.
- tstegart 15y agoAwesome. That counts as working in my book. As long as it doesn't disappear :)
- charliepark 15y agoUpdate: 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!
- dpcan 15y agoDoesn't work in IE9 either it seems.
- envex 15y agoMaybe 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.
- kenrik 15y agoIt'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 15y agoI 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.
- Davertron 15y agoAwesome. Can you add sliders for size and padding?
- sheraz 15y agoVery cool. Thank you for putting that up. I'll be using that on future bootstrap projects
- cfontes 15y agoThanks very useful...
- cgarvey 15y agoWould be nice to have numerical values shown for each slider for reference later. Thanks for this tool!
- charliepark 15y agoJust added these in! Thanks for the suggestion!
- agscala 15y agoAlso if there was a way to permalink a button, that would be amazing. I like sending links around to people for opinions
- Animus7 15y agoI 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 15y agoThe 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.
- sachinag 15y agoAnd if you're asking "what is?", the answer is probably your copy.
- deleted 15y ago[deleted]
- scottkrager 15y agoI'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 15y agoYup. 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.
- heyrhett 15y agoThanks a lot for the great tool! It's very intuitive and works well!
- mindhunter 15y agoWatch 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 15y agoThanks 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-final-linear-gradient-syntax/ http://www.broken-links.com/2012/01/11/the-new-and-hopefully....
- clyfe 15y agoSimilar: http://colorfiddle.heroku.com/ http://colorfiddle.heroku.com/
- moomin 15y agoLovely, but I'm going to be churlish. Couldn't you write this in a more "less.js" style?
- c_t_montgomery 15y agoOne 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...
- ohgodthecat 15y agoThe 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.
- timc3 15y agoAnother 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.
- tgriesser 15y agoI 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 https://gist.github.com/1718640
- nhebb 15y agoNice. 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 15y agoI'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 15y agoThanks Charlie. (Had to do a hard page reload to see them, though. Chrome's caching is maddening sometimes.)
- miles_matthias 15y agoVery nice, thanks!
- mc 15y agoThis is great. Thanks.
- andr 15y agoUnrelated: I clicked through to Monotask, liked the idea, but got an error when I tried to sign up for the form.
- c_t_montgomery 15y agoMe too. Sending an email to them right now...
- charliepark 15y agoBah. Sorry about that. Investigating now.
- charliepark 15y agoOkay ... 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!
- charliepark 15y agoFWIW, I think I've got it fixed now. It was a third-party javascript issue and the way our code was interacting with it.
- a1k0n 15y agoBeautiful indeed, but one gripe: The mouse roll-over colors aren't sufficiently different from the button-pressed colors.
- v33ra 15y agoPretty 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/ http://www.colorzilla.com/gradient-editor/
- haberman 15y agoI'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 15y agoIt's a code generator, you use it to style your button then use the CSS in your site.
- haberman 15y agoWhoops, 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 15y agoIt 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/ 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.
- pdenya 15y agoI love the bill & teds reference but I like the buttons from http://css-tricks.com/examples/ButtonMaker/ http://css-tricks.com/examples/ButtonMaker/ better.
- jQueryIsAwesome 15y ago2 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 15y agoI'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.
- mk1 15y agoWhy is this marketed only towards Bootstrap users? This will work fine for anyone. Great tool nonetheless!
- jonny_eh 15y agoHas 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 15y agoIt 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 15y agoJust 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 15y agoThe ability to edit the HSL numbers directly, or to input a hex and have it convert would be nice. Looks good though.
- joshwprinceton 15y agothis is AMAZING
- pacomerh 15y agoHandy 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-gradients-with-rounded-corners/ http://abouthalf.com/2010/10/25/internet-explorer-9-gradient...