Social Networking Development and Design Guide: Action Buttons

by JamesKyle

HTML

<article class="style">
    <div class="notice">
        <h1>Hello there.</h1>
        <p>This guide is in no way attempting to stifle innovation or creativity, but instead help social networks connect and coordinate design and development efforts with others so that we eliminate any confusion and extra work on a massive scale. Also this guide will actively trying to make social networks more 'open-source' to developers. <em>Oh and by the way its <strong>most definitely</strong> trying to make sure that no one can ever be creative or original ever again.. ever.</em></p>
        
        <p>PS: I'm already working on a new button type that would adapt to its container, sort of a <a target="_blank" href="http://www.alistapart.com/articles/responsive-web-design/">responsive</a> button design. It's pretty damn awesome.</p>
        
        <p>- <a target="_blank" href="https://twitter.com/#!/thejameskyle/">James Kyle</a></p>
    </div>
    <header>
        <h1>Social Networking Development and Design Guide: </h1>
        <h2>Action Buttons</h2>
        
        <p>Size Matters! If your in a row with everyone else, you don't wanna be the guy thats all sorts of weird proportions! That's why social buttons have to all be the same size! ...So you don't look weird... your welcome..</p>
        
        <p>
            <input id="styling" type="checkbox" checked />
            <label for="styling">Styling</label>
        </p>
    </header>
    
    <section>
        <h1>Standard</h1>
        <button class="standard">Action</button>
        <h3><s>Button [~50px x 20px]</s> : <s>Margin-right [6px]</s> : <s>Margin-bottom [5px]</s></h3>
    </section>
    <section>
        <h1>Small</h1>
        <button class="small">Action</button>
        <h3><s>Button [~35px x 15px]</s> : <s>Margin-right [4px]</s> : <s>Margin-bottom [4px]</s></h3>
    </section>
    <section>
        <h1>Large</h1>
        <button class="large">Action</button>
        <h3><s>Button [~55px x 24px]</s> :...

CSS

/* BUTTON RESET */
button {background: none; border: none; margin: 0; padding: 0; font-family: inherit; font-size: 1em; line-height: 1.2em; width: auto; overflow: visible }

/*************************************************************************************************************/
/* STRUCTURE *************************************************************************************************/
/*************************************************************************************************************/

* > button:last-child {margin-right: 0 !important}

button {cursor: pointer}
button, button dt, button dd {display: inline-block;}

button           { height:    20px; padding: 0 5px 0 0; margin: 0 10px 5px 0  ; font-size:    13px; line-height:    20px }
button.text      { height: inherit; padding:   inherit; margin: 0  0   0   0  ; font-size: inherit; line-height: inherit }
button.text   dt { height: inherit; padding:   inherit; margin: 0  4px 0  -5px; font-size: inherit; line-height: inherit }
button.text   dd { height: inherit; padding:   inherit; margin: 0  0   0  -5px; font-size: inherit; line-height: inherit }
button.number    { height: inherit; padding:   inherit; margin: 0  0   0   0  ; font-size: inherit; line-height: inherit }
button.number dt { height: inherit; padding:   inherit; margin: 0  0   0  -5px; font-size: inherit; line-height: inherit }
button.number dd { height: inherit; padding:   inherit; margin: 0  0   0   0  ; font-size: inherit; line-height: inherit }

button.number dt { margin-right: 0 !important }
button.number dd { margin-left: 0 !important }

button.standard    {height: 20px; padding: 0 5px; margin: 0 6px 5px 0; font-size: 13px; line-height: 20px}
button.standard dt {margin-left: -5px; margin-right: 4px}
button.standard dd {margin-left: -5px; margin-right: -4px}

button.small       {height: 15px; padding: 0 3px; margin: 0 4px 4px 0; font-size: 10px; line-height: 13px}
button.small    dt {margin-left: -3px; margin-right:...

JavaScript

var article = $('article'),
    checkbox = $('input:checkbox#styling');

checkbox.change(function(){
    article.toggleClass('style');
});