erikjung
3/1/2012 - 10:48 PM

Buttons and Icons

Buttons and Icons

settings.json
content_copyfile_download
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"}
dabblet.html
content_copyfile_download
<html>
<body>

<h3>Normal button</h3>

    <a class="button">Click me</a>

<h3>Normal button w/ icon:</h3>

    <a class="button icon">Click me</a>
    
<h3>Normal button that is icon-only:</h3>

    <a class="ir button icon">Click me</a>
    
<h3>Large button</h3>
    <a class="button big">Click me</a>
    
<h3>Large button w/ icon:</h3>

    <a class="button big icon">Click me</a>
    
<h3>Large button that is icon-only:</h3>

    <a class="ir button big icon">Click me</a>
    
    
 </body>
 </html>
dabblet.css
content_copyfile_download
/**
 * Buttons and Icons
 */
 
html {
font-size: 12px;
}

body {
font-size:1rem;
}

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }

h3 {
font-size:1.5rem;
}





.button {
background-color:#ccc;
display:inline-block;
line-height:2rem;
padding:0 .5em;
}
.button.big {
font-size:1.7rem;
line-height:3rem;
}
.button.icon {
background-image: url(//placehold.it/24x24/000/&text=O);
background-repeat: no-repeat;
background-position: top right; /* top would vary */
padding-right: 2.5rem;
}
.button.icon.big {
background-image: url(//placehold.it/36x36/000/&text=O);
padding-right: 3.5rem;
}
.button.ir.icon {
background-position: top center; /* top would vary */
padding: 0;
width: 2rem;
}
.button.ir.big {
width: 3rem;
}