Buttons complete

README.md

@@ -4,8 +4,8 @@ A minimal, responsive CSS framework to get you started.
 ## Components
 
 - **base**: normalize.css & basic typography `GZIPPED SIZE`: 1,183 bytes
-- **grid**:	coming soon
-- **button**: coming soon
+- **button**: button styles `GZIPPED SIZE`: 439 bytes
 - **form**: coming soon
-- **table**: coming soon
+- **grid**:	coming soon 
 - **nav**: coming soon
+- **table**: coming soon

css/mini-base-button.css

@@ -0,0 +1,268 @@
+/*			Base 									*/
+/*			Button									*/
+html {
+  font-family: "Helvetica Neue", Helvetica, sans-serif;
+  font-size: 1em;
+  line-height: 1.5;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%; }
+
+body {
+  margin: 0;
+  color: #222;
+  background-color: #eee; }
+
+article, aside, footer, header, nav, section, figcaption, figure, main, details, menu {
+  display: block; }
+
+h1, h2, h3, h4, h5, h6, hr {
+  line-height: 1.3;
+  margin: 0.7em 0;
+  font-weight: 500; }
+  h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, hr small {
+    color: #484848;
+    font-weight: 200; }
+
+h1 {
+  font-size: 2em; }
+
+h2 {
+  font-size: 1.5em; }
+
+h3 {
+  font-size: 1.15em; }
+
+h4 {
+  font-size: 1em; }
+
+h5 {
+  font-size: 0.8em; }
+
+h6 {
+  font-size: 0.7em; }
+
+small {
+  font-size: 75%; }
+
+p, pre {
+  margin: 0 0 0.6em; }
+
+ul, ol {
+  margin-top: 0;
+  margin-bottom: 0.6em; }
+  ul ul, ul ol, ol ul, ol ol {
+    margin-bottom: 0; }
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  border: 0;
+  border-top: 1px solid #c8c8c8; }
+
+code, pre, kbd, samp {
+  font-family: monospace;
+  font-size: 1em; }
+
+code, pre {
+  padding: 2px 4px;
+  background-color: #d8d8d8;
+  border-radius: 4px; }
+
+kbd {
+  padding: 2px 4px;
+  color: #eee;
+  background-color: #2b2b2b;
+  border-radius: 4px; }
+
+pre {
+  display: block;
+  word-break: break-all;
+  word-wrap: break-word; }
+  pre code {
+    padding: 0;
+    font-size: inherit;
+    color: inherit;
+    white-space: pre-wrap;
+    background-color: transparent;
+    border-radius: 0; }
+
+a {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  color: #2678b3; }
+  a:active, a:hover {
+    outline-width: 0;
+    color: #3793d5; }
+  a:visited {
+    color: #1d5c89; }
+    a:visited:active, a:visited:hover {
+      color: #2678b3; }
+
+figure {
+  margin: 1em 40px; }
+
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted; }
+
+b, strong {
+  font-weight: inherit; }
+
+b, strong {
+  font-weight: bolder; }
+
+dfn {
+  font-style: italic; }
+
+mark {
+  background-color: #ffff33;
+  color: #222; }
+
+sub, sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline; }
+
+sub {
+  bottom: -0.25em; }
+
+sup {
+  top: -0.5em; }
+
+[hidden], .hidden, template {
+  display: none; }
+
+audio, video {
+  display: inline-block; }
+
+audio:not([controls]) {
+  display: none;
+  height: 0; }
+
+img {
+  border-style: none; }
+
+svg:not(:root) {
+  overflow: hidden; }
+
+button, input, optgroup, select, textarea {
+  font-family: "Helvetica Neue", Helvetica, sans-serif;
+  font-size: 100%;
+  line-height: 1.3;
+  margin: 0; }
+
+button, input, hr {
+  overflow: visible; }
+
+button, select {
+  text-transform: none; }
+
+button, html [type="button"], [type="reset"], [type="submit"] {
+  -webkit-appearance: button; }
+  button::-moz-focus-inner, html [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0; }
+  button:-moz-focusring, html [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText; }
+
+fieldset {
+  border: 1px solid #c8c8c8;
+  border-radius: 4px;
+  margin: 0 2px;
+  padding: 0.35em 0.65em 0.75em; }
+
+[type="checkbox"], [type="radio"], legend {
+  box-sizing: border-box;
+  padding: 0; }
+
+legend {
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  white-space: normal; }
+
+progress {
+  display: inline-block;
+  vertical-align: baseline; }
+
+textarea {
+  overflow: auto; }
+
+[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
+  height: auto; }
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px; }
+  [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none; }
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit; }
+
+.btn {
+  border-radius: 4px;
+  cursor: pointer;
+  display: inline-block;
+  margin: 2px 0;
+  padding: 6px 12px;
+  color: #2a2a2a;
+  background: #dbdbdb;
+  border: 1px solid #b9b9b9; }
+  .btn:hover, .btn:active, .btn:focus {
+    background: #c2c2c2;
+    border-color: #a0a0a0; }
+  .btn.disabled, .btn[disabled], .btnfieldset[disabled] {
+    cursor: not-allowed;
+    opacity: .65; }
+
+.btn.btn-b {
+  color: #eee;
+  background: #3370bb;
+  border: 1px solid #2d70af; }
+  .btn.btn-b:hover, .btn.btn-b:active, .btn.btn-b:focus {
+    background: #285893;
+    border-color: #235686; }
+
+.btn.btn-g {
+  color: #eee;
+  background: #4caf50;
+  border: 1px solid #3cb941; }
+  .btn.btn-g:hover, .btn.btn-g:active, .btn.btn-g:focus {
+    background: #3d8b40;
+    border-color: #309233; }
+
+.btn.btn-c {
+  color: #eee;
+  background: #38a6e8;
+  border: 1px solid #2dbdde; }
+  .btn.btn-c:hover, .btn.btn-c:active, .btn.btn-c:focus {
+    background: #198ed4;
+    border-color: #1d9dbb; }
+
+.btn.btn-y {
+  color: #eee;
+  background: #edc637;
+  border: 1px solid #d1bc24; }
+  .btn.btn-y:hover, .btn.btn-y:active, .btn.btn-y:focus {
+    background: #ddb214;
+    border-color: #a5951d; }
+
+.btn.btn-r {
+  color: #eee;
+  background: #be2e2a;
+  border: 1px solid #ae342f; }
+  .btn.btn-r:hover, .btn.btn-r:active, .btn.btn-r:focus {
+    background: #942421;
+    border-color: #862824; }
+
+.btn.btn-lg {
+  padding: 9px 15px;
+  font-size: 135%; }
+
+.btn.btn-sm {
+  padding: 4px 8px;
+  font-size: 80%; }

css/mini-base-button.min.css

@@ -0,0 +1 @@
+html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#eee}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1,h2,h3,h4,h5,h6,hr{line-height:1.3;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,hr small{color:#484848;font-weight:200}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.8em}h6{font-size:.7em}small{font-size:75%}p,pre{margin:0 0 .6em}ol,ul{margin-top:0;margin-bottom:.6em}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}hr{box-sizing:content-box;height:0;border:0;border-top:1px solid #c8c8c8}code,kbd,pre,samp{font-family:monospace;font-size:1em}code,pre{padding:2px 4px;background-color:#d8d8d8;border-radius:4px}kbd{padding:2px 4px;color:#eee;background-color:#2b2b2b;border-radius:4px}pre{display:block;word-break:break-all;word-wrap:break-word}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#2678b3}a:active,a:hover{outline-width:0;color:#3793d5}a:visited{color:#1d5c89}a:visited:active,a:visited:hover{color:#2678b3}figure{margin:1em 40px}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff3;color:#222}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}.hidden,[hidden],template{display:none}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:100%;line-height:1.3;margin:0}button,hr,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner,html [type=button]::-moz-focus-inner{border-style:none;padding:0}[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring,html [type=button]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c8c8c8;border-radius:4px;margin:0 2px;padding:.35em .65em .75em}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.btn{border-radius:4px;cursor:pointer;display:inline-block;margin:2px 0;padding:6px 12px;color:#2a2a2a;background:#dbdbdb;border:1px solid #b9b9b9}.btn:active,.btn:focus,.btn:hover{background:#c2c2c2;border-color:#a0a0a0}.btn.disabled,.btn[disabled],.btnfieldset[disabled]{cursor:not-allowed;opacity:.65}.btn.btn-b{color:#eee;background:#3370bb;border:1px solid #2d70af}.btn.btn-b:active,.btn.btn-b:focus,.btn.btn-b:hover{background:#285893;border-color:#235686}.btn.btn-g{color:#eee;background:#4caf50;border:1px solid #3cb941}.btn.btn-g:active,.btn.btn-g:focus,.btn.btn-g:hover{background:#3d8b40;border-color:#309233}.btn.btn-c{color:#eee;background:#38a6e8;border:1px solid #2dbdde}.btn.btn-c:active,.btn.btn-c:focus,.btn.btn-c:hover{background:#198ed4;border-color:#1d9dbb}.btn.btn-y{color:#eee;background:#edc637;border:1px solid #d1bc24}.btn.btn-y:active,.btn.btn-y:focus,.btn.btn-y:hover{background:#ddb214;border-color:#a5951d}.btn.btn-r{color:#eee;background:#be2e2a;border:1px solid #ae342f}.btn.btn-r:active,.btn.btn-r:focus,.btn.btn-r:hover{background:#942421;border-color:#862824}.btn.btn-lg{padding:9px 15px;font-size:135%}.btn.btn-sm{padding:4px 8px;font-size:80%}

css/mini-base.css

@@ -1,3 +1,5 @@
+/*			Base 									*/
+/*			Button									*/
 html {
   font-family: "Helvetica Neue", Helvetica, sans-serif;
   font-size: 1em;

css/mini-button.css

@@ -0,0 +1,65 @@
+/*			Base 									*/
+/*			Button									*/
+.btn {
+  border-radius: 4px;
+  cursor: pointer;
+  display: inline-block;
+  margin: 2px 0;
+  padding: 6px 12px;
+  color: #2a2a2a;
+  background: #dbdbdb;
+  border: 1px solid #b9b9b9; }
+  .btn:hover, .btn:active, .btn:focus {
+    background: #c2c2c2;
+    border-color: #a0a0a0; }
+  .btn.disabled, .btn[disabled], .btnfieldset[disabled] {
+    cursor: not-allowed;
+    opacity: .65; }
+
+.btn.btn-b {
+  color: #eee;
+  background: #3370bb;
+  border: 1px solid #2d70af; }
+  .btn.btn-b:hover, .btn.btn-b:active, .btn.btn-b:focus {
+    background: #285893;
+    border-color: #235686; }
+
+.btn.btn-g {
+  color: #eee;
+  background: #4caf50;
+  border: 1px solid #3cb941; }
+  .btn.btn-g:hover, .btn.btn-g:active, .btn.btn-g:focus {
+    background: #3d8b40;
+    border-color: #309233; }
+
+.btn.btn-c {
+  color: #eee;
+  background: #38a6e8;
+  border: 1px solid #2dbdde; }
+  .btn.btn-c:hover, .btn.btn-c:active, .btn.btn-c:focus {
+    background: #198ed4;
+    border-color: #1d9dbb; }
+
+.btn.btn-y {
+  color: #eee;
+  background: #edc637;
+  border: 1px solid #d1bc24; }
+  .btn.btn-y:hover, .btn.btn-y:active, .btn.btn-y:focus {
+    background: #ddb214;
+    border-color: #a5951d; }
+
+.btn.btn-r {
+  color: #eee;
+  background: #be2e2a;
+  border: 1px solid #ae342f; }
+  .btn.btn-r:hover, .btn.btn-r:active, .btn.btn-r:focus {
+    background: #942421;
+    border-color: #862824; }
+
+.btn.btn-lg {
+  padding: 9px 15px;
+  font-size: 135%; }
+
+.btn.btn-sm {
+  padding: 4px 8px;
+  font-size: 80%; }

css/mini-button.min.css

@@ -0,0 +1 @@
+.btn{border-radius:4px;cursor:pointer;display:inline-block;margin:2px 0;padding:6px 12px;color:#2a2a2a;background:#dbdbdb;border:1px solid #b9b9b9}.btn:active,.btn:focus,.btn:hover{background:#c2c2c2;border-color:#a0a0a0}.btn.disabled,.btn[disabled],.btnfieldset[disabled]{cursor:not-allowed;opacity:.65}.btn.btn-b{color:#eee;background:#3370bb;border:1px solid #2d70af}.btn.btn-b:active,.btn.btn-b:focus,.btn.btn-b:hover{background:#285893;border-color:#235686}.btn.btn-g{color:#eee;background:#4caf50;border:1px solid #3cb941}.btn.btn-g:active,.btn.btn-g:focus,.btn.btn-g:hover{background:#3d8b40;border-color:#309233}.btn.btn-c{color:#eee;background:#38a6e8;border:1px solid #2dbdde}.btn.btn-c:active,.btn.btn-c:focus,.btn.btn-c:hover{background:#198ed4;border-color:#1d9dbb}.btn.btn-y{color:#eee;background:#edc637;border:1px solid #d1bc24}.btn.btn-y:active,.btn.btn-y:focus,.btn.btn-y:hover{background:#ddb214;border-color:#a5951d}.btn.btn-r{color:#eee;background:#be2e2a;border:1px solid #ae342f}.btn.btn-r:active,.btn.btn-r:focus,.btn.btn-r:hover{background:#942421;border-color:#862824}.btn.btn-lg{padding:9px 15px;font-size:135%}.btn.btn-sm{padding:4px 8px;font-size:80%}

css/mini-full.css

@@ -1,3 +1,5 @@
+/*			Base 									*/
+/*			Button									*/
 html {
   font-family: "Helvetica Neue", Helvetica, sans-serif;
   font-size: 1em;
@@ -200,3 +202,67 @@ textarea {
 ::-webkit-file-upload-button {
   -webkit-appearance: button;
   font: inherit; }
+
+.btn {
+  border-radius: 4px;
+  cursor: pointer;
+  display: inline-block;
+  margin: 2px 0;
+  padding: 6px 12px;
+  color: #2a2a2a;
+  background: #dbdbdb;
+  border: 1px solid #b9b9b9; }
+  .btn:hover, .btn:active, .btn:focus {
+    background: #c2c2c2;
+    border-color: #a0a0a0; }
+  .btn.disabled, .btn[disabled], .btnfieldset[disabled] {
+    cursor: not-allowed;
+    opacity: .65; }
+
+.btn.btn-b {
+  color: #eee;
+  background: #3370bb;
+  border: 1px solid #2d70af; }
+  .btn.btn-b:hover, .btn.btn-b:active, .btn.btn-b:focus {
+    background: #285893;
+    border-color: #235686; }
+
+.btn.btn-g {
+  color: #eee;
+  background: #4caf50;
+  border: 1px solid #3cb941; }
+  .btn.btn-g:hover, .btn.btn-g:active, .btn.btn-g:focus {
+    background: #3d8b40;
+    border-color: #309233; }
+
+.btn.btn-c {
+  color: #eee;
+  background: #38a6e8;
+  border: 1px solid #2dbdde; }
+  .btn.btn-c:hover, .btn.btn-c:active, .btn.btn-c:focus {
+    background: #198ed4;
+    border-color: #1d9dbb; }
+
+.btn.btn-y {
+  color: #eee;
+  background: #edc637;
+  border: 1px solid #d1bc24; }
+  .btn.btn-y:hover, .btn.btn-y:active, .btn.btn-y:focus {
+    background: #ddb214;
+    border-color: #a5951d; }
+
+.btn.btn-r {
+  color: #eee;
+  background: #be2e2a;
+  border: 1px solid #ae342f; }
+  .btn.btn-r:hover, .btn.btn-r:active, .btn.btn-r:focus {
+    background: #942421;
+    border-color: #862824; }
+
+.btn.btn-lg {
+  padding: 9px 15px;
+  font-size: 135%; }
+
+.btn.btn-sm {
+  padding: 4px 8px;
+  font-size: 80%; }

css/mini-full.min.css

@@ -1 +1 @@
-html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#eee}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1,h2,h3,h4,h5,h6,hr{line-height:1.3;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,hr small{color:#484848;font-weight:200}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.8em}h6{font-size:.7em}small{font-size:75%}p,pre{margin:0 0 .6em}ol,ul{margin-top:0;margin-bottom:.6em}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}hr{box-sizing:content-box;height:0;border:0;border-top:1px solid #c8c8c8}code,kbd,pre,samp{font-family:monospace;font-size:1em}code,pre{padding:2px 4px;background-color:#d8d8d8;border-radius:4px}kbd{padding:2px 4px;color:#eee;background-color:#2b2b2b;border-radius:4px}pre{display:block;word-break:break-all;word-wrap:break-word}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#2678b3}a:active,a:hover{outline-width:0;color:#3793d5}a:visited{color:#1d5c89}a:visited:active,a:visited:hover{color:#2678b3}figure{margin:1em 40px}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff3;color:#222}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}.hidden,[hidden],template{display:none}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:100%;line-height:1.3;margin:0}button,hr,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner,html [type=button]::-moz-focus-inner{border-style:none;padding:0}[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring,html [type=button]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c8c8c8;border-radius:4px;margin:0 2px;padding:.35em .65em .75em}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
+html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#eee}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1,h2,h3,h4,h5,h6,hr{line-height:1.3;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,hr small{color:#484848;font-weight:200}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.8em}h6{font-size:.7em}small{font-size:75%}p,pre{margin:0 0 .6em}ol,ul{margin-top:0;margin-bottom:.6em}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}hr{box-sizing:content-box;height:0;border:0;border-top:1px solid #c8c8c8}code,kbd,pre,samp{font-family:monospace;font-size:1em}code,pre{padding:2px 4px;background-color:#d8d8d8;border-radius:4px}kbd{padding:2px 4px;color:#eee;background-color:#2b2b2b;border-radius:4px}pre{display:block;word-break:break-all;word-wrap:break-word}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#2678b3}a:active,a:hover{outline-width:0;color:#3793d5}a:visited{color:#1d5c89}a:visited:active,a:visited:hover{color:#2678b3}figure{margin:1em 40px}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff3;color:#222}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}.hidden,[hidden],template{display:none}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:100%;line-height:1.3;margin:0}button,hr,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner,html [type=button]::-moz-focus-inner{border-style:none;padding:0}[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring,html [type=button]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c8c8c8;border-radius:4px;margin:0 2px;padding:.35em .65em .75em}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.btn{border-radius:4px;cursor:pointer;display:inline-block;margin:2px 0;padding:6px 12px;color:#2a2a2a;background:#dbdbdb;border:1px solid #b9b9b9}.btn:active,.btn:focus,.btn:hover{background:#c2c2c2;border-color:#a0a0a0}.btn.disabled,.btn[disabled],.btnfieldset[disabled]{cursor:not-allowed;opacity:.65}.btn.btn-b{color:#eee;background:#3370bb;border:1px solid #2d70af}.btn.btn-b:active,.btn.btn-b:focus,.btn.btn-b:hover{background:#285893;border-color:#235686}.btn.btn-g{color:#eee;background:#4caf50;border:1px solid #3cb941}.btn.btn-g:active,.btn.btn-g:focus,.btn.btn-g:hover{background:#3d8b40;border-color:#309233}.btn.btn-c{color:#eee;background:#38a6e8;border:1px solid #2dbdde}.btn.btn-c:active,.btn.btn-c:focus,.btn.btn-c:hover{background:#198ed4;border-color:#1d9dbb}.btn.btn-y{color:#eee;background:#edc637;border:1px solid #d1bc24}.btn.btn-y:active,.btn.btn-y:focus,.btn.btn-y:hover{background:#ddb214;border-color:#a5951d}.btn.btn-r{color:#eee;background:#be2e2a;border:1px solid #ae342f}.btn.btn-r:active,.btn.btn-r:focus,.btn.btn-r:hover{background:#942421;border-color:#862824}.btn.btn-lg{padding:9px 15px;font-size:135%}.btn.btn-sm{padding:4px 8px;font-size:80%}

scss/mini-base-button.scss

@@ -0,0 +1,3 @@
+@import 'mini/variables';
+@import 'mini/base';
+@import 'mini/button';

scss/mini-button.scss

@@ -0,0 +1,2 @@
+@import 'mini/variables';
+@import 'mini/button';

scss/mini-full.scss

@@ -1,2 +1,3 @@
 @import 'mini/variables';
-@import 'mini/base';
+@import 'mini/base';
+@import 'mini/button';

scss/mini/_button.scss

@@ -0,0 +1,51 @@
+@mixin btn-variant ($color, $background, $border){
+	color: $color;
+	background: $background;
+	border: 1px solid $border;
+	&:hover, &:active, &:focus{
+    	background: darken($background,10%);
+    	border-color:	darken($border,10%);
+  	}
+}
+
+.btn{
+	border-radius: 4px;
+	cursor: pointer;
+	display: inline-block;
+	margin: 2px 0;
+	padding: 6px 12px;
+	@include btn-variant($btn-color, $btn-background-color, $btn-border-color);
+	&.disabled, &[disabled], &fieldset[disabled]{
+		cursor: not-allowed;
+		opacity: .65;
+	}
+}
+
+.btn.btn-b{
+	@include btn-variant($btn-b-color, $btn-b-background-color, $btn-b-border-color);
+}
+
+.btn.btn-g{
+	@include btn-variant($btn-g-color, $btn-g-background-color, $btn-g-border-color);
+}
+
+.btn.btn-c{
+	@include btn-variant($btn-c-color, $btn-c-background-color, $btn-c-border-color);
+}
+
+.btn.btn-y{
+	@include btn-variant($btn-y-color, $btn-y-background-color, $btn-y-border-color);
+}
+
+.btn.btn-r{
+	@include btn-variant($btn-r-color, $btn-r-background-color, $btn-r-border-color);
+}
+
+.btn.btn-lg{
+	padding: 9px 15px;
+	font-size: 135%;
+}
+.btn.btn-sm{
+	padding: 4px 8px;
+	font-size: 80%;
+}

scss/mini/_variables.scss

@@ -1,4 +1,24 @@
+/*			Base 									*/
 $body-background-color:						#eee;
 $body-color:								#222;
 $a-color:									#2678b3;
-$mark-color:								#ffff33;
+$mark-color:								#ffff33;
+/*			Button									*/
+$btn-background-color:						#dbdbdb;
+$btn-color:									#2a2a2a;
+$btn-border-color:							#b9b9b9;
+$btn-b-background-color:					#3370bb;
+$btn-b-color:								#eee;
+$btn-b-border-color:						#2d70af;
+$btn-g-background-color:					#4caf50;
+$btn-g-color:								#eee;
+$btn-g-border-color:						#3cb941;
+$btn-c-background-color:					#38a6e8;
+$btn-c-color:								#eee;
+$btn-c-border-color:						#2dbdde;
+$btn-y-background-color:					#edc637;
+$btn-y-color:								#eee;
+$btn-y-border-color:						#d1bc24;
+$btn-r-background-color:					#be2e2a;
+$btn-r-color:								#eee;
+$btn-r-border-color:						#ae342f;

testpage.html

@@ -59,7 +59,7 @@ Suspendisse varius turpis et dui viverra semper.</pre>
     <div>Etiam maximus, ante vitae porttitor tincidunt, sem erat pharetra turpis, a ornare tortor purus <a href="https://www.google.com">ut justo</a>.
     </div>
     <br>
-    <button type="button">Sample button</button>
+    <button type="button" class="btn-r btn-sm btn" disabled>Sample button</button>
     <blockquote cite="https://www.google.com">Nam non diam ante. Curabitur non enim vitae eros luctus porta.</blockquote>
   </body>
 </html>