
Buttons – A button library built with Sass and Compass - djug
http://alexwolfe.github.io/Buttons/
======
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.

~~~
darushimo
I'd actually say this is a usability problem. If i just tap my touchpad (on
MBP), there's a click event registered, but it's very, very short. the
response from the button depends on the duration of the click event. If I
click and hold down the touchpad, i see the whole animation, but if i don't
and just tap, i see either a quick flash or no animation at all. This could be
really confusing, especially with the skeumorphic buttons that look like they
would react in they were clicked ("I clicked it, but did the click register?")

This could be fixed by adding a minimum click length for the current animation
to occur. If the click length is lower, the full (or a partial) animation
could just automatically occur at a fixed (fast) rate.

~~~
alexwolfe
Nice point, make a pull request and I'll merge, or you could file an issue and
I'll fix it when I have some time.

------
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](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](http://bourbon.io)) and pull other elements from other
places (e.g. grid from Susy
([http://susy.oddbird.net/](http://susy.oddbird.net/)), which has now been
rewritten to not depend on compass anymore).

~~~
alex_doom
Bourbon has Neat ([http://neat.bourbon.io/](http://neat.bourbon.io/)) now,
which is a lightweight responsive grid framework. No compass anymore!

------
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'_?

------
manishsharan
This so much nicer than SASSY buttons , which is what I have been using.
[https://github.com/jhardy/Sassy-Buttons](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?

~~~
mwalsh
Ah, ya, I guess the examples didn't get updated.

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

~~~
roblevintennis
totally valid too :)

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

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

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

~~~
roblevintennis
Guys, I sit somewhere in the middle on this. In fact, I'd say the ever hated
"it depends"...are you in the prototyping phase? Have you toggled off the
Buttons you don't want in the Builder page? If you're really into customizing,
have you just considered stealing some of the raw ideas and/or scss? Really,
we wouldn't mind :) Here's another approach...say you just want the pills and
like the general direction but want to tweak it:

Go to the builder page, remove all but pills Go in to the _options.scss
partial and tweak some more Optionally take all of what's left and then
refactor to your liking

I'd claim you save some time with above and still get a fully customized
button.

Regarding using something like Bootstrap "out of the box" is not something I'd
personally want to do once getting my project into production...but again, I'm
fine using for just prototyping and then tweaking the styles later. That said,
to each is own

~~~
roblevintennis
And another analogy I'd point out is if you're in Photoshop (or in browser),
and you use something like icomoon app to make a nice set of font icons and
then style some texture/shapes/etc. behind it for something pretty nice. I
feel like that would be a completely valid and workable approach...that said,
sometimes you'd want to make the artwork from scratch yourself and that would
be valid too

