5 ms·
Btns.css – A small CSS module for building beautiful, responsive buttons
- nathancahill 12y agoMinor 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 12y agoFucking descenders. It's not just all caps, many words/phrases don't have descenders in them in lower case.
- mseepgood 12y agoThese aren't buttons. They are rectangles with rounded corners and text inside.
- lowboy 12y agoThese are buttons, just styled differently than others you may be used to.
- daGrevis 12y agoHow can buttons be responsive? And why there are two hyphens in some, not all, classes like “btn--full“ or “btn--m“?
- ceejayoz 12y agoRe: responsive buttons, the end of the page shows some: > Centered, full-width on mobile, with a max-width of 16em on larger screens.
- componentr 12y ago| 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.
- Kiro 12y agoYou mean Block__Element--Modifiers.
- err4nt 12y agoI 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 12y ago.multi-word-block__with-an-element--and-modifier Also see the .site-search example here http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ http://csswizardry.com/2013/01/mindbemding-getting-your-head...
- err4nt 12y agoAhh 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 ;)
- pg_is_a_butt 12y ago"all the button style i need???" i don't even see a single example of a button i WANT, let alone "need". i want a button, not a border.
- dfc 12y agoThe linked site states the size is "663B gzipped and minified." Yet another argument for not editorializing in submission titles.
- dang 12y agoThanks. We reverted the title.
- daigoba66 12y agoThe 0.4s hover transitions feel like an eternity. Changing it to 0.1s suddenly makes the page feel faster and more responsive.