Buttons and Icons
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"}
<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>
/**
* 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;
}