Button generator

buttons.scss

/* Colored buttons button states */
@mixin button($offset) {
	&                                          { background-position: 0      -#{$offset}px; }
	&:after                                    { background-position: -480px -#{$offset}px; }
	&>.after                                   { background-position: -480px -#{$offset}px; }

	&:hover                                    { background-position: -500px -#{$offset}px; }
	&:hover:after                              { background-position: -980px -#{$offset}px; }
	&:hover>.after                             { background-position: -980px -#{$offset}px; }

	&:active                                   { background-position: -1000px -#{$offset}px; }
	&:active:after                             { background-position: -1480px -#{$offset}px; }
	&:active>.after                            { background-position: -1480px -#{$offset}px; }

	&.button-start:after                       { background-position:  -480px -#{$offset+34}px; }
	&.button-start:hover:after                 { background-position:  -980px -#{$offset+34}px; }
	&.button-start:active:after                { background-position: -1480px -#{$offset+34}px; }

	&.button-start>.after                      { background-position:  -480px -#{$offset+34}px; }
	&.button-start:hover>.after                { background-position:  -980px -#{$offset+34}px; }
	&.button-start:active>.after               { background-position: -1480px -#{$offset+34}px; }
	
	&.button-end                               { background-position: 0       -#{$offset+34}px; }
	&.button-end:hover                         { background-position: -500px  -#{$offset+34}px; }
	&.button-end:active                        { background-position: -1000px -#{$offset+34}px; }
}

.button { @include button(0); }
.button.button-tell { @include button(68); }
.button.button-report { @include button(136); }
.button.button-inform { @include button(204); }
.button.button-direct { @include button(272); }
.button.button-argue  { @include button(340); }
.button.button-refer { @include button(408); }
.button.button-sampletasks { @include button(476); }
.button.button-languageboxes { @include button(544); }