Buttons

dabblet.css

/**
 * Buttons

 */

* {font-family: 'Droid Sans', sans-serif;}

.ui-button{
 border: 1px solid transparent;     
 display: inline-block;
 text-align: center;
 cursor: pointer;
}
 .round{
   border-radius: 3px;
 }        
 .small{
  font-size: 10px;
  font-weight: bold;    
  height: 28px;
  line-height: 28px;
  min-width: 94px;
 }  
.small.blue{ 
  border-color: #004e95;
  background-color: #076cc7;
  background-image: linear-gradient(top, #7ac1ff , #076cc7);
  color: #fff;
  text-shadow: 0px 1px 0px rgba(0,0,0,0.20);
  text-transform: uppercase;
  box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.75),
    	inset 0px 1px 0px 0px rgba(255,255,255,0.40),
        inset 0px 0px 0px 1px rgba(255,255,255,0.20);   		
 }
 .small.blue:hover{  
  background-color: #1277d1;
  background-image: linear-gradient(top, #9ad0ff , #1277d1); 
  box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.75),     
     	inset 0px 1px 0px 0px rgba(255,255,255,0.40),
        inset 0px 0px 0px 1px rgba(255,255,255,0.20);  
 }
 .small.blue:active{
  background-color: #056dca;
  background-image: linear-gradient(top, #449fef , #056dca);  
  box-shadow: 0px 2px 0px 0px rgba(255,255,255,1), 
     	inset 0px 1px 1px 0px rgba(0,0,0,0.48); 
 }

.small.light{
  border-color: #bdbdbd;  
  background-color: #fdfdfd;
  background-image: linear-gradient(  bottom, #dedede 0%,#ededed 2%,#fdfdfd 40%,#fff 100%); 
  box-shadow: 0px 1px 0px 0px #fff;   		
  color: #0066cc;
  text-transform: uppercase;
}
.small.light.alt{
  font-size: 14px;
  text-transform: none;
  font-weight: normal;                     
}



 
.small.light:hover{
  border-color: #e7e4e4;    
  box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.45);   		
 }
.small.light:active{
  border-color: #aaa;    
  box-shadow: 0px 1px 0px 0px #fff,
       	inset 0px 1px 1px 0px #cfcfcf;  		
 }

.small.grey{
  height: 20px;
  line-height: 20px;
  min-width: 60px;  
  font-size: 12px;
  color: #000;
  font-weight: normal;
  border-color: #9ca3a5;
  background-color: #dce2e3;
  background-image: linear-gradient(top, #dce2e3 , #afb6b8);  
  box-shadow:   
   	inset 0px 1px 0px 0px rgba(255,255,255,0.40),
        inset 0px 0px 0px 1px rgba(255,255,255,0.30); 
   text-shadow: 0px 1px 0px rgba(255,255,255,0.71);       
}
.small.grey:hover{
  box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.75),     
     	inset 0px 1px 0px 0px rgba(255,255,255,0.40),
        inset 0px 0px 0px 1px rgba(255,255,255,0.30);  
}
.small.grey:active{
  box-shadow: 0px 1px 3px 0px rgba(255,255,255,0.75),     
	inset 0px 1px 1px 0px rgba(0,0,0,0.40);   
}


.large {
  min-width: 198px;
  height: 38px;
  line-height: 38px;
  font-size: 14px;
}
.large.wide{
  min-width: 228px;
}
.large.wide:hover{
  min-width: 230px;
}
.large.wide:active{
  min-width: 228px;
}

.large.light {
  color: #0066cc;
  font-weight: normal;
  border-color: #cfcfcf;
  background-color: #ededed;
  background-image: linear-gradient(top, #fff , #ededed);  
  box-shadow:  0px 1px 0px 0px #fff;
  text-shadow: 0px 1px 0px rgba(255,255,255,0.75);  
}
.large.light:hover{
  box-shadow:  0px 1px 1px 0px rgba(0,0,0,0.30);   
  border: 0;
  height: 40px;
  line-height: 40px;
}


.large.light:active{
  box-shadow:  0px 1px 0px 0px #fff;   
  border: 1px solid #aaa;
  background-image: linear-gradient(  bottom, #dedede 0%,#ededed 2%,#fdfdfd 40%,#fff 100%); 
  box-shadow: 0px 1px 0px 0px #fff,          	
        inset 0px 1px 0px 0px #d4d4d4;
  height: 38px;
  line-height: 38px;



}
.large.grey{
  color: #0066cc;    
  border-color: #a0a0a0;
  background-color: #ddd;
  background-image: linear-gradient(top, #eee , #ddd);  
  text-shadow: 0px 1px 0px rgba(255,255,255,0.87);  
}

.large.grey:hover{
  border: 0;
  height: 40px; 
  line-height: 40px;
  min-width: 200px;
  box-shadow:  0px 1px 2px 0px rgba(0,0,0,0.45);    
}
.large.grey:active{
  border: 1px solid #a0a0a0;
  height: 38px; 
  line-height: 38px;
  min-width: 198px;
 box-shadow: 0px 1px 0px 0px #fff,          	
        inset 0px 1px 3px 0px #b2b2b2;
}

.large.blue {
  border-color: #003581;
  font-weight: bold;
  background-color: #0047ab;
  background-image: linear-gradient(top, #4a92f7 , #0047ab);
  color: #fff;
  text-shadow: 0px 1px 0px rgba(0,0,0,0.53);
  text-transform: uppercase;
  box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.75),
    	inset 0px 1px 0px 0px rgba(255,255,255,0.40),
        inset 0px 0px 0px 1px rgba(255,255,255,0.20);
} 
.large.blue:hover {
  background-color: #076cc7;
  background-image: linear-gradient(top, #7ac1ff , #076cc7);
}

.large.blue:active{
  box-shadow: 0px 1px 1px 0px #fff,
    	inset 0px 1px 1px 0px rgba(0,0,0,0.48);
  background-color: #056dca;
  background-image: linear-gradient(top, #449fefe , #056dca);

}

.icon{
display:inline-block;
width: 16px;
height: 16px;
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/twitter_2.png) center center no-repeat;
margin-left: 8px;
margin-right: 8px;
}

.icon.left{
float:left;
line-height: inherit;
height: inherit;
margin-left: 16px;
margin-right: 0;
}
.icon.right{
float:right;
line-height: inherit;
height: inherit;
margin-right: 16px;
margin-left: 0;

}





 




 

dabblet.html

<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<div class="ui-button blue small round">Add to cart</div>   <br/><br/>



<div class="ui-button light small round">Add to cart</div>  <br/><br/>


<div class="ui-button grey small">Log out</div>  <br/><br/>

<div class="ui-button light large wide"><span class="icon center star"></span>Add to Favorites</div>  <br/><br/>

<div class="ui-button light small alt">Save</div>  <br/><br/>

<div class="ui-button grey large">Save &amp; Continue</div>  <br/><br/>

<div class="ui-button light large wide"><span class="icon left up"></span>Upload Image to this Set  </div>  <br/><br/>

<div class="ui-button blue large">Apply for this job</div>   
​

settings.json

{"view":"split-vertical","prefixfree":"1","page":"css"}