<h3 class="sc-sub-title">Style 1</h3> <button class="button color-hover large">button</button><br /> <button class="button color-hover">button</button><br /> <button class="button color-hover small">button</button> <h3 class="sc-sub-title">Style 2</h3> <button class="button large">button</button><br /> <button class="button">button</button><br /> <button class="button small">button</button> <h3 class="sc-sub-title">Style 3</h3> <button class="button transparent large">button</button><br /> <button class="button transparent">button</button><br /> <button class="button transparent small">button</button> <h3 class="sc-sub-title">Style 4</h3> <button class="button transparent color-hover large">button</button><br /> <button class="button transparent color-hover">button</button><br /> <button class="button transparent color-hover small">button</button> <h3 class="sc-sub-title">Style 5</h3> <button class="button color large">button</button><br /> <button class="button color">button</button><br /> <button class="button color small">button</button> <h3 class="sc-sub-title">Style 6</h3> <button class="button color transparent large">button</button><br /> <button class="button color transparent">button</button><br /> <button class="button color transparent small">button</button> <h3 class="sc-sub-title">Style 7</h3> <button class="button color white-hover large">button</button><br /> <button class="button color white-hover">button</button><br /> <button class="button color white-hover small">button</button> <h3 class="sc-sub-title">Style 8</h3> <button class="button color black-hover large">button</button><br /> <button class="button color black-hover">button</button><br /> <button class="button color black-hover small">button</button>
.button { background: #303030 none repeat scroll 0 0; border-width: 1px; border-style: solid; border-color: #303030; color: #fff; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 500; height: 36px; line-height: 36px; padding: 0 26px; text-align: center; text-transform: uppercase; } .button.color { background: #f05a66 none repeat scroll 0 0; border-color: #f05a66; } .button.transparent { background: transparent; color: #303030; } .button.color.transparent { color: #f05a66; } .button.small { height: 32px; line-height: 32px; padding: 0 20px; } .button.large { height: 42px; line-height: 42px; padding: 0 32px; } .button:hover { background: transparent; color: #303030; } .button.color:hover { background: transparent; color: #f05a66; } .button.transparent:hover { background: #303030; color: #fff; } .button.color.transparent:hover { background: #f05a66; } .button.color-hover:hover { background: #f05a66; border-color: #f05a66; color: #fff; } .button.white-hover:hover { background: #fff; border-color: #fff; color: #f05a66; } .button.black-hover:hover { background: #303030; border-color: #303030; color: #fff; }