adds radius and round css to buttons

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index c949dd22d6c8e87f6b8b59461564f5e8f5da00b0..b1228ffdcdcb6b3a1dd287e4c0b88412ffb02434 100755 (executable)
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -69,14 +69,6 @@ table.button {
       background: $button-background;
       border: 2px solid $button-background;
 
-      &.radius {
-        border-radius: $button-radius;
-      }
-
-      &.rounded {
-        border-radius: $button-rounded;
-      }
-
       a {
         font-family: $body-font-family;
         font-size: map-get($button-font-size, default);
@@ -90,6 +82,16 @@ table.button {
       }
     }
   }
+
+  &.radius table td {
+    border-radius: $button-radius;
+    border: none;
+  }
+
+  &.rounded table td {
+    border-radius: $button-rounded;
+    border: none;
+  }
 }
 
 table.button:hover table tr td a,

diff --git a/test/visual/pages/button.html b/test/visual/pages/button.html
index b3af5ef2116fe425c2f27b6410fe62a177df8fd8..ae2555bb44f796b0f7de7d747d6f2a410f98880e 100644 (file)
--- a/test/visual/pages/button.html
+++ b/test/visual/pages/button.html
@@ -91,6 +91,58 @@
       </tr>
     </table>  
 
+    <table class="row">
+      <tr>
+        <th class="small-12 large-12 columns">
+
+          <table class="button radius">
+            <tbody>
+              <tr>
+                <td>
+                  <table>
+                    <tbody>
+                      <tr>
+                        <td>
+                          <a href="#">Radius?</a>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+        </th>
+      </tr>
+    </table>
+
+    <table class="row">
+      <tr>
+        <th class="small-12 large-12 columns">
+
+          <table class="button rounded">
+            <tbody>
+              <tr>
+                <td>
+                  <table>
+                    <tbody>
+                      <tr>
+                        <td>
+                          <a href="#">Rounded?</a>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          
+        </th>
+      </tr>
+    </table>
+
     <table class="row">
       <tr>
         <th class="small-12 large-12 columns">