

Btns.css – A small CSS module for building beautiful, responsive buttons - mrmrs
http://mrmrs.io/btns

======
daigoba66
The 0.4s hover transitions feel like an eternity. Changing it to 0.1s suddenly
makes the page feel faster and more responsive.

------
nathancahill
Minor quibble: set the padding to 1em 0.75em 0.9em instead of 1em 0.75em.
Having slightly smaller padding on the bottom improves the proportions when
using all caps (or letters without tails).

~~~
monkeynotes
Fucking descenders. It's not just all caps, many words/phrases don't have
descenders in them in lower case.

------
daGrevis
How can buttons be responsive? And why there are two hyphens in some, not all,
classes like “btn--full“ or “btn--m“?

~~~
componentr
| And why there are two hyphens in some, not all, classes like “btn--full“ or
“btn--m“?

They are Block--Element__Modifiers (BEM). It's a style of css meant for
developer readability and code reuse.

In this instance you have the following:

.btn { //the base code for a button }

.btn--s { font-size: 12px; }

.btn--m { font-size: 14px; }

.btn--l { font-size: 20px; border-radius: .25em!important; }

Now if I want to make two buttons, one with small font, the other with large
font, I can simply do this:

<button class="btn btn--s"></button> <button class="btn btn--l"></button>

Personally, I like writing with BEM methodology rather than repeating style
rules over multiple classes.

~~~
err4nt
I get the concept of using multiple classes to modify a base style (class="btn
btn-small") and even using delimiters in multi-part classnames so you can use
regular expressions in your CSS to select groups of classes that conform to a
naming convention (I.e. [class^="btn-"] {color:red} would make both
class="btn-small" and class="btn-large" red).

What is the advantage to a double delimiter over using a single delimiter?
(btn--small)

~~~
lowboy
.multi-word-block__with-an-element--and-modifier

Also see the .site-search example here
[http://csswizardry.com/2013/01/mindbemding-getting-your-
head...](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-
bem-syntax/)

~~~
err4nt
Ahh gotcha! I still don't see why they can't do this without doubling up the
delimiters just by agreeing on a stricter naming convention ;)

------
mseepgood
These aren't buttons. They are rectangles with rounded corners and text
inside.

~~~
lowboy
These are buttons, just styled differently than others you may be used to.

------
dfc
The linked site states the size is "663B gzipped and minified." Yet another
argument for not editorializing in submission titles.

~~~
dang
Thanks. We reverted the title.

