Reg Buttons 3

dabblet.css

/**
Reg Buttons 3
 */

button { padding:0; margin:0; margin-top:20px;
 border:0; width:210px; transition:box-shadow 10ms;
text-align:left; text-transform:uppercase; cursor:pointer; }
button:before { background:url('http://f.cl.ly/items/383k1i1l1I2W2I38080Q/regsprite2.png') }

section { width:300px }

/*general*/
#reg-fb,#reg-tw { height:48px;
font-family:'lucida grande';
font-size:10px; text-align:left; line-height:30px;
border-radius:6px; position:relative;
color:#fff; box-shadow:inset 0 0 1px 1px rgba(255,255,255,.2),
0 2px 2px 0px #bbb }
#reg-fb em, #reg-tw em { display:block; font-size:14px;
font-weight:600; font-style:normal; margin-top:-16px }

/*gradient background*/
#reg-fb { background: #516793;
background:linear-gradient(top, #4e6ba5 0%,#516a9b 53%,#435f97 53%,#42557b 100%) }
#reg-tw { background: #4db5db;
background:linear-gradient(top, #52c9eb 0%,#4fc0e1 53%,#49b2d0 53%,#45a9c6 100%) }

/*logos*/
#reg-fb:before,#reg-tw:before { content:''; width:56px; height:48px;
float:left; margin-right:8px }
#reg-fb:before { background-position:0 -25px }
#reg-tw:before { background-position:0 -74px }

/*interactions*/
#reg-fb:active, #reg-tw:active {
box-shadow:inset 0 0 1px 1px rgba(255,255,255,.2),
0 1px 1px 0px #bbb }

/* reg by email */
#reg-email { border:0; width:210px; height:25px; line-height:25px;
color:#454545; font-family:'proxima nova'; font-weight:bold; font-size:10px;
background:#edf1f3; background:linear-gradient(top, #fafbfc 0%,#e2e9eb 53%,#d7dee1 53%,#c2cbd0 100%);
border-radius:3px; border:1px solid #e0e0e0; box-shadow:0 2px 2px 0px #bbb }
#reg-email:before { content:''; width:30px; height:25px;
float:left; margin-right:8px; background-position:0 -2px }

#reg-email:active { box-shadow:0 1px 1px 0px #bbb }

dabblet.html

<section>
<button id="reg-fb">Register using <em>Facebook</em></button>
<button id="reg-tw">Register using <em>Twitter</em></button>
<button id="reg-email">Register with just Email</button>
</section>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}