Add utilities for buttons

Author: jfmdev

README.md

@@ -47,7 +47,9 @@ To set the radius of the border you can use classes `.pure-bd-radius-*` (where `
 
 ### Buttons
 
-TODO
+You can style buttons using classes `.pure-button-black` / `.pure-button-blue` / `.pure-button-cyan` / `.pure-button-green` / `.pure-button-magenta` / `.pure-button-red` / `.pure-button-white` / `.pure-button-yellow`.
+
+Also you can use the `.pure-button-disabled` class to make the button to _look_ disabled.
 
 ### Opacity
 
@@ -68,6 +70,9 @@ The library uses variables `--pureBlack` / `--pureBlue` / `--pureCyan` / `--pure
 
 You can override these variables to change the colors used, but on that case you must also override the corresponding RBG variables: `--pureBlackRgb` / `--pureBlueRgb` / `--pureCyanRgb` / `--pureGreenRgb` / `--pureMagentaRgb` / `--pureRedRgb` / `--pureWhiteRgb` / `--pureYellowRgb`.
 
+Additionally, for the case of buttons, you may also need to override the variables `---pureBlackContrastRgb` / `---pureBlueContrastRgb` / `---pureCyanContrastRgb` / `---pureGreenContrastRgb` / `---pureGreyContrastRgb` / `---pureMagentaContrastRgb` / `---pureRedContrastRgb` / `---pureWhiteContrastRgb` / `---pureYellowContrastRgb` that define the color of the labels inside the buttons.
+
+
 ### Spacing
 
 The base spacing used is `0.25rem`, but you can change this value by overriding the value of the `--pureSpacingUnit` variable.

demo.html

@@ -29,6 +29,7 @@ <h3>Text colors</h3>
     <div class="pure-txt-blue">pure-txt-blue</div>
     <div class="pure-txt-cyan">pure-txt-cyan</div>
     <div class="pure-txt-green">pure-txt-green</div>
+    <div class="pure-txt-grey">pure-txt-grey</div>
     <div class="pure-txt-magenta">pure-txt-magenta</div>
     <div class="pure-txt-red">pure-txt-red</div>
     <div class="pure-txt-white pure-bg-black">pure-txt-white</div>
@@ -48,6 +49,7 @@ <h3>Text links</h3>
     <div><a href="#" class="pure-txt-blue">pure-txt-blue</a></div>
     <div><a href="#" class="pure-txt-cyan">pure-txt-cyan</a></div>
     <div><a href="#" class="pure-txt-green">pure-txt-green</a></div>
+    <div><a href="#" class="pure-txt-grey">pure-txt-grey</a></div>
     <div><a href="#" class="pure-txt-magenta">pure-txt-magenta</a></div>
     <div><a href="#" class="pure-txt-red">pure-txt-red</a></div>
     <div><a href="#" class="pure-txt-white pure-bg-black">pure-txt-white</a></div>
@@ -59,6 +61,7 @@ <h2>Background colors</h2>
     <div class="pure-bg-blue">pure-bg-blue</div>
     <div class="pure-bg-cyan">pure-bg-cyan</div>
     <div class="pure-bg-green">pure-bg-green</div>
+    <div class="pure-bg-grey">pure-bg-grey</div>
     <div class="pure-bg-magenta">pure-bg-magenta</div>
     <div class="pure-bg-red">pure-bg-red</div>
     <div class="pure-bg-white">pure-bg-white</div>
@@ -104,6 +107,8 @@ <h3>Border colors</h3>
     <br>
     <div class="pure-p-2 pure-bd-1 pure-bd-green">pure-bd-green</div>
     <br>
+    <div class="pure-p-2 pure-bd-1 pure-bd-grey">pure-bd-grey</div>
+    <br>
     <div class="pure-p-2 pure-bd-1 pure-bd-magenta">pure-bd-magenta</div>
     <br>
     <div class="pure-p-2 pure-bd-1 pure-bd-red">pure-bd-red</div>
@@ -127,19 +132,43 @@ <h3>Border colors</h3>
 
     <h3>Border radius</h3>
 
-    <div class="pure-p-2 pure-bd-2 pure-bd-radius-1">pure-bd-radius-1</div>
+    <div class="pure-p-2 pure-bd-2 pure-bd-radius-1" style="max-width: 160px;">pure-bd-radius-1</div>
+    <br>
+    <div class="pure-p-2 pure-bd-2 pure-bd-radius-2" style="max-width: 160px;">pure-bd-radius-2</div>
+    <br>
+    <div class="pure-p-2 pure-bd-2 pure-bd-radius-3" style="max-width: 160px;">pure-bd-radius-3</div>
+    <br>
+    <div class="pure-p-2 pure-bd-2 pure-bd-radius-4" style="max-width: 160px;">pure-bd-radius-4</div>
+    <br>
+    <div class="pure-p-2 pure-bd-2 pure-bd-radius-5" style="max-width: 160px;">pure-bd-radius-5</div>
+    <br>
+    <div class="pure-p-2 pure-bd-2 pure-bd-radius-pill" style="max-width: 160px;">pure-bd-radius-pill</div>
+    <br>
+    <div class="pure-p-2 pure-bd-2 pure-bd-radius-circle" style="max-width: 160px;">pure-bd-radius-circle</div>
+
+    <h2>Buttons</h2>
+
+    <div><button type="button" class="pure-button pure-button-black pure-txt-white">pure-button-black</button></div>
+    <br>
+    <div><button type="button" class="pure-button pure-button-blue">pure-button-blue</button></div>
+    <br>
+    <div><button type="button" class="pure-button pure-button-cyan">pure-button-cyan</button></div>
     <br>
-    <div class="pure-p-2 pure-bd-2 pure-bd-radius-2">pure-bd-radius-2</div>
+    <div><button type="button" class="pure-button pure-button-green">pure-button-green</button></div>
     <br>
-    <div class="pure-p-2 pure-bd-2 pure-bd-radius-3">pure-bd-radius-3</div>
+    <div><button type="button" class="pure-button pure-button-grey">pure-button-grey</button></div>
     <br>
-    <div class="pure-p-2 pure-bd-2 pure-bd-radius-4">pure-bd-radius-4</div>
+    <div><button type="button" class="pure-button pure-button-magenta">pure-button-magenta</button></div>
     <br>
-    <div class="pure-p-2 pure-bd-2 pure-bd-radius-5">pure-bd-radius-5</div>
+    <div><button type="button" class="pure-button pure-button-red">pure-button-red</button></div>
+    <br>
+    <div><button type="button" class="pure-button pure-button-white pure-bg-black">pure-button-white</button></div>
+    <br>
+    <div><button type="button" class="pure-button pure-button-yellow">pure-button-yellow</button></div>
+
     <br>
-    <div class="pure-p-2 pure-bd-2 pure-bd-radius-pill">pure-bd-radius-pill</div>
     <br>
-    <div class="pure-p-2 pure-bd-2 pure-bd-radius-circle">pure-bd-radius-circle</div>
+    <div><button type="button" class="pure-button pure-button-blue pure-button-disabled">pure-button-blue pure-button-disabled</button></div>
 
     <h2>Opacity</h2>