Buttons – A button library built with Sass and Compass

[audiodude]

This is amazing, very well done, perfect for what I needed! I was scouring the web for simple buttons all morning and couldn't quite find anything I liked. I was getting ready to include a "custom" Boostrap with just the buttons, but this is much better. Thanks!

[jneal]

Pretty nice. I saw the 3D buttons, and my initial reaction was they looked a little bland. Then I clicked and saw it press in and immediately my opinion changed because it looked very cool.

[harlanlewis]

They definitely look cool, but also made me think I need to keep my trackpad pressed against my desk until the button had been fully depressed before any action would occur. Trained by too many 'slide from here to there to confirm' interactions, I suppose.

[liquidise]

For those who, like me, were unsure what Compass was, and realized simply googling for it would be less successful than other library names.

Compass: http://compass-style.org

[te_chris]

Compass isn't very well maintained and someone I work with even said it may be discontinued. I'd look at a lighter mixin lib like bourbon (http://bourbon.io) and pull other elements from other places (e.g. grid from Susy (http://susy.oddbird.net/), which has now been rewritten to not depend on compass anymore).

[antihero]

Not sure what it's like now, but a fair few of the frontend people I've worked with were complaining about it a few months ago because the mixins it provides were unreliable.

[Edd314159]

Why do the "flat" buttons suddenly turn 3D while active (pressed)? That's a mixed metaphor if I've ever seen one.

[nilliams]

Why? They're flat and simple because (if you buy into the flat movement's sentiment) we don't need skeumorphism to distinguish a button anymore, but when you press it it does something 'because feedback'.

It doesn't really matter what it does, we just need to know we pressed it, so why shouldn't the thing it does be 'go a bit 3d'?

[fibbery]

I noticed that as well... it's pretty visually awkward, going from no button-like affordances to suddenly having them appear during the click event.

[manishsharan]

This so much nicer than SASSY buttons , which is what I have been using. https://github.com/jhardy/Sassy-Buttons

[scottydelta]

I have been using bootstrap as it is easy to integrate as a backend developer but now starting to hate it, It seems so ugly now after using it for a while. will use this soon :)

[scottydelta]

What is the UI framework that you are using on the webpage?

[roblevintennis]

Hrm, no real UI framework. I think a bit of backbone and some jquery libs like scrollto and pretty-something for the code samples (it's all in the view source hehe)...anyway, the real magic of how this works for those inclined is it's a gh-pages branch for the site, which makes jsonp requests to heroku where the buttons are compiled per the options you've selected, and then finally archived and returned to user. It was a fun constraint to work out but turned out to be doable and fun...but guys, pretty please don't DOS it :)

[mwalsh]

Frankly, it's inexcusable for a style library/framework intended for mass consumption to forget the :focus state on form elements.

[roblevintennis]

But didn't that get merged in to the last github on [master]? I believe so. Are you not seeing those come through from the Builder page or something?

[SimeVidas]

Look at all those butt… I mean, links :P

[douglee650]

i only ask for slightly shorter class names

[ttty]

I still prefer to make my own simple and flat design (:

[roblevintennis]

totally valid too :)

[h1fra]

I don't want to be that guy but.. What's the point?

Unless you are the most lazy ass on earth you still want to modify the style.

And by style I mean, everything, to fit your design.

[wuliwong]

I'm not sure I understand your point? From my perspective, modifying is easier than making from scratch. The only time I've created buttons "from scratch" is when I was working with a graphic designer. As a developer, I always pull in things like this to speed up the process. It is undoubtably slower and would result in a worse final product if I attempt to learn all the details of what this person provides for free as a starting point.

[scottydelta]

I totally agree with wuliwong, infact I have never edited any design and have always used available ones(bootstrap) out of the box to save time as my motive as a developer is a clean working app than a beautiful app.

[codez]

I agree to an extent. In corporates etc. you're going to be building from scratch because these things won't fit in with guidelines and it's easier to build from scratch. However, it's good for quickness when working on personal projects. That being said I do find this one a little overkill and more than what you'd probably want without creating custom builds etc. also some of the behaviour and styling doesn't work as I'd assume. For example, drop down isn't drop down, it's more like drop on.

[nperez]

I agree with part of your point - I probably won't be plugging it into a project and using it as-is, but I can appreciate the source being out there. I often check the source for projects I respect to see how they accomplished similar things to what I'm trying to accomplish. For those learning advanced CSS and hoping to roll their own button styles, this could be a useful resource.