buttons

<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;}