resolves #75

CHANGELOG.md

 # Amaze UI Change Log
 ---
 
+## 2014.09 W4
+
+### CSS
+
+__Button__：
+
+- `NEW` 增加圆角和直角样式。
+
 ## 2014.09 W3
 
 ### CSS

docs/css/button.md

@@ -3,6 +3,8 @@
 
 ## 基本使用
 
+### 默认样式
+
 在要应用按钮样式的元素上添加 `.am-btn`，再设置相应的颜色。
 
 - `.am-btn-default` - 默认，灰色按钮
@@ -14,27 +16,54 @@
 - `.am-btn-link`
 
 `````html
-<button type="button" class="am-btn am-btn-default">Default</button>
-<button type="button" class="am-btn am-btn-primary">Primary</button>
-<button type="button" class="am-btn am-btn-secondary">Secondary</button>
-<button type="button" class="am-btn am-btn-success">Success</button>
-<button type="button" class="am-btn am-btn-warning">Warning</button>
-<button type="button" class="am-btn am-btn-danger">Danger</button>
-<button type="button" class="am-btn am-btn-link">Link</button>
-<button type="button" class="am-btn am-btn-default">Link button like style</button>
+<button type="button" class="am-btn am-btn-default">默认样式</button>
+<button type="button" class="am-btn am-btn-primary">主色按钮</button>
+<button type="button" class="am-btn am-btn-secondary">次色按钮</button>
+<button type="button" class="am-btn am-btn-success">绿色按钮</button>
+<button type="button" class="am-btn am-btn-warning">橙色按钮</button>
+<button type="button" class="am-btn am-btn-danger">红色按钮</button>
+<button type="button" class="am-btn am-btn-link">链接</button>
+<button type="button" class="am-btn am-btn-default">应用按钮样式的链接</button>
 `````
 
 ```html
-<button type="button" class="am-btn am-btn-default">Default</button>
-<button type="button" class="am-btn am-btn-primary">Primary</button>
-<button type="button" class="am-btn am-btn-secondary">Secondary</button>
-<button type="button" class="am-btn am-btn-success">Success</button>
-<button type="button" class="am-btn am-btn-warning">Warning</button>
-<button type="button" class="am-btn am-btn-danger">Danger</button>
-<button type="button" class="am-btn am-btn-link">Link</button>
-<button type="button" class="am-btn am-btn-default">Link button like style</button>
+<button type="button" class="am-btn am-btn-default">默认样式</button>
+<button type="button" class="am-btn am-btn-primary">主色按钮</button>
+<button type="button" class="am-btn am-btn-secondary">次色按钮</button>
+<button type="button" class="am-btn am-btn-success">绿色按钮</button>
+<button type="button" class="am-btn am-btn-warning">橙色按钮</button>
+<button type="button" class="am-btn am-btn-danger">红色按钮</button>
+<button type="button" class="am-btn am-btn-link">链接</button>
+<button type="button" class="am-btn am-btn-default">应用按钮样式的链接</button>
 ```
 
+### 方形按钮
+
+在默认样式的基础上添加 `.am-square` class.
+
+`````html
+<button type="button" class="am-btn am-btn-default am-square">默认样式</button>
+<button type="button" class="am-btn am-btn-primary am-square">主色按钮</button>
+<button type="button" class="am-btn am-btn-secondary am-square">次色按钮</button>
+<button type="button" class="am-btn am-btn-success am-square">绿色按钮</button>
+<button type="button" class="am-btn am-btn-warning am-square">橙色按钮</button>
+<button type="button" class="am-btn am-btn-danger am-square">红色按钮</button>
+`````
+
+### 椭圆形按钮
+
+在默认样式的基础上添加 `.am-round` class.
+
+`````html
+<button type="button" class="am-btn am-btn-default am-round">默认样式</button>
+<button type="button" class="am-btn am-btn-primary am-round">主色按钮</button>
+<button type="button" class="am-btn am-btn-secondary am-round">次色按钮</button>
+<button type="button" class="am-btn am-btn-success am-round">绿色按钮</button>
+<button type="button" class="am-btn am-btn-warning am-round">橙色按钮</button>
+<button type="button" class="am-btn am-btn-danger am-round">红色按钮</button>
+`````
+
+
 ## 按钮状态
 
 ### 激活状态
@@ -42,20 +71,20 @@
 在按钮上添加 `.am-active` class。
 
 `````html
-<button type="button" class="am-btn am-btn-primary am-active">Primary button</button>
-<button type="button" class="am-btn am-btn-default am-active">Button</button>
+<button type="button" class="am-btn am-btn-primary am-active">激活状态</button>
+<button type="button" class="am-btn am-btn-default am-active">激活状态</button>
 <br >
 <br >
-<a href="#" class="am-btn am-btn-primary am-active" role="button">Primary link</a>
-<a href="#" class="am-btn am-btn-default am-active" role="button">Link</a>
+<a href="#" class="am-btn am-btn-primary am-active" role="button">链接按钮激活状态</a>
+<a href="#" class="am-btn am-btn-default am-active" role="button">链接按钮激活状态</a>
 `````
 ```html
-<button type="button" class="am-btn am-btn-primary am-active">Primary button</button>
-<button type="button" class="am-btn am-btn-default am-active">Button</button>
+<button type="button" class="am-btn am-btn-primary am-active">激活状态</button>
+<button type="button" class="am-btn am-btn-default am-active">激活状态</button>
 <br >
 <br >
-<a href="#" class="am-btn am-btn-primary am-active" role="button">Primary link</a>
-<a href="#" class="am-btn am-btn-default am-active" role="button">Link</a>
+<a href="#" class="am-btn am-btn-primary am-active" role="button">链接按钮激活状态</a>
+<a href="#" class="am-btn am-btn-default am-active" role="button">链接按钮激活状态</a>
 ```
 
 ### 禁用状态
@@ -63,18 +92,18 @@
 在按钮上设置 `disabled` 属性或者添加 `.am-disabled` class。
 
 `````html
-<button type="button" class="am-btn am-btn-primary" disabled="disabled">Primary button</button>
-<button type="button" class="am-btn am-btn-default" disabled="disabled">Button</button>
+<button type="button" class="am-btn am-btn-primary" disabled="disabled">禁用状态</button>
+<button type="button" class="am-btn am-btn-default" disabled="disabled">禁用状态</button>
 <br><br>
-<a href="#" class="am-btn am-btn-primary am-disabled">Primary link</a>
-<a href="#" class="am-btn am-btn-default am-disabled">Link</a>
+<a href="#" class="am-btn am-btn-primary am-disabled">链接按钮禁用状态</a>
+<a href="#" class="am-btn am-btn-default am-disabled">链接按钮禁用状态</a>
 `````
 ```html
-<button type="button" class="am-btn am-btn-primary" disabled="disabled">Primary button</button>
-<button type="button" class="am-btn am-btn-default" disabled="disabled">Button</button>
+<button type="button" class="am-btn am-btn-primary" disabled="disabled">禁用状态</button>
+<button type="button" class="am-btn am-btn-default" disabled="disabled">禁用状态</button>
 
-<a href="#" class="am-btn am-btn-primary am-disabled">Primary link</a>
-<a href="#" class="am-btn am-btn-default am-disabled">Link</a>
+<a href="#" class="am-btn am-btn-primary am-disabled">链接按钮禁用状态</a>
+<a href="#" class="am-btn am-btn-default am-disabled">链接按钮禁用状态</a>
 ```
 
 <div class="am-alert am-alert-warning">
@@ -90,25 +119,25 @@
 - `.am-btn-xs`
 
 `````html
-<button type="button" class="am-btn am-btn-default am-btn-lg">Large button</button>
-<button type="button" class="am-btn am-btn-default">Default button</button>
-<button type="button" class="am-btn am-btn-default am-btn-sm">Small button</button>
-<button type="button" class="am-btn am-btn-default am-btn-xs">Extra small button</button>
+<button type="button" class="am-btn am-btn-default am-btn-lg">按钮 - lg</button>
+<button type="button" class="am-btn am-btn-default">按钮默认大小</button>
+<button type="button" class="am-btn am-btn-default am-btn-sm">按钮 - sm</button>
+<button type="button" class="am-btn am-btn-default am-btn-xs">按钮 - xs</button>
 <br />
 <br />
-<button type="button" class="am-btn am-btn-primary am-btn-lg">Large button</button>
-<button type="button" class="am-btn am-btn-primary">Default button</button>
-<button type="button" class="am-btn am-btn-primary am-btn-sm">Small button</button>
-<button type="button" class="am-btn am-btn-primary am-btn-xs">Extra small button</button>
+<button type="button" class="am-btn am-btn-primary am-btn-lg">按钮 - lg</button>
+<button type="button" class="am-btn am-btn-primary">按钮默认大小</button>
+<button type="button" class="am-btn am-btn-primary am-btn-sm">按钮 - sm</button>
+<button type="button" class="am-btn am-btn-primary am-btn-xs">按钮 - xs</button>
 `````
 ```html
 <button type="button" class="am-btn am-btn-default am-btn-lg">Large button</button>
-<button type="button" class="am-btn am-btn-default">Default button</button>
+<button type="button" class="am-btn am-btn-default">默认样式 button</button>
 <button type="button" class="am-btn am-btn-default am-btn-sm">Small button</button>
 <button type="button" class="am-btn am-btn-default am-btn-xs">Extra small button</button>
 
 <button type="button" class="am-btn am-btn-primary am-btn-lg">Large button</button>
-<button type="button" class="am-btn am-btn-primary">Default button</button>
+<button type="button" class="am-btn am-btn-primary">默认样式 button</button>
 <button type="button" class="am-btn am-btn-primary am-btn-sm">Small button</button>
 <button type="button" class="am-btn am-btn-primary am-btn-xs">Extra small button</button>
 ```
@@ -119,12 +148,12 @@
 添加 `.am-btn-block` class。
 
 `````html
-<button type="button" class="am-btn am-btn-primary am-btn-block">Block level button</button>
-<button type="button" class="am-btn am-btn-default am-btn-block">Block level button</button>
+<button type="button" class="am-btn am-btn-primary am-btn-block">块级显示的按钮</button>
+<button type="button" class="am-btn am-btn-default am-btn-block">块级显示的按钮</button>
 `````
 ```html
-<button type="button" class="am-btn am-btn-primary am-btn-block">Block level button</button>
-<button type="button" class="am-btn am-btn-default am-btn-block">Block level button</button>
+<button type="button" class="am-btn am-btn-primary am-btn-block">块级显示的按钮</button>
+<button type="button" class="am-btn am-btn-default am-btn-block">块级显示的按钮</button>
 ```
 
 ## 按钮 Icon
@@ -134,42 +163,42 @@
 `````html
 <button class="am-btn am-btn-default">
   <i class="am-icon-cog"></i>
-  Settings
+  设置
 </button>
 
 <a class="am-btn am-btn-warning" href="#">
   <i class="am-icon-shopping-cart"></i>
-  Checkout
+  结账
 </a>
 
 <button class="am-btn am-btn-default">
   <i class="am-icon-spinner am-icon-spin"></i>
-  Loading
+  加载中
 </button>
 
 <button class="am-btn am-btn-primary">
-  Download
+  下载片片
   <i class="am-icon-cloud-download"></i>
 </button>
 `````
 ```html
 <button class="am-btn am-btn-default">
   <i class="am-icon-cog"></i>
-  Settings
+  设置
 </button>
 
 <a class="am-btn am-btn-warning" href="#">
   <i class="am-icon-shopping-cart"></i>
-  Checkout
+  结账
 </a>
 
 <button class="am-btn am-btn-default">
   <i class="am-icon-spinner am-icon-spin"></i>
-  Loading
+  加载中
 </button>
 
 <button class="am-btn am-btn-primary">
-  Download
+  下载片片
   <i class="am-icon-cloud-download"></i>
 </button>
 ```
\ No newline at end of file

less/button.less

@@ -45,8 +45,9 @@
   border-radius: @global-border-radius;
   line-height: @btn-line-height;
   font-size: @btn-font-size;
+  outline: 0;
   .user-select(none);
-  .transition(width 0.15s);
+  .transition(e("background-color 300ms ease-out, border-color 300ms ease-out"));
 
   &:focus {
     .tab-focus();
@@ -54,15 +55,15 @@
 
   &:hover,
   &:focus {
+    outline: 0;
     color: @btn-default-color;
     text-decoration: none;
   }
 
   &:active,
   &.am-active {
-    outline: 0;
     background-image: none;
-    .box-shadow(inset 0 1px 5px rgba(0,0,0,.125));
+    .box-shadow(inset 0 1px 8px rgba(0, 0, 0, .125));
   }
 
   &.am-disabled,
@@ -76,10 +77,18 @@
     .box-shadow(none);
   }
 
+  &.am-round {
+    border-radius: @global-rounded;
+  }
+
+  &.am-square {
+    border-radius: @global-square;
+  }
 }
 
 
-/* Modifiers */
+// Modifiers
+// ========================================================================
 
 .am-btn-default {
   .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);

less/mixins.less

@@ -722,8 +722,8 @@
   &.am-active,
   .am-active .am-dropdown-toggle& {
     color: @color;
-    background-color: darken(@background, 8%);
-    border-color: darken(@background, 15%);
+    background-color: darken(@background, 12%);
+    border-color: darken(@border, 12%);
   }
   &:active,
   &.am-btn-active,

less/variables.less

@@ -149,10 +149,17 @@
 // ------------------------------------------------------------------------
 
 @global-border-radius:           2px;
+@global-radius:                  @global-border-radius;
 @border-radius-large:            5px;
 @border-radius-small:            1px;
 
 
+//
+
+@global-rounded:         1000px;
+@global-square:           0;
+
+
 
 // Responsive variables
 // ========================================================================
@@ -304,29 +311,29 @@
 @btn-line-height:                1.2;
 @btn-font-size:                  @global-font-size;
 
-@btn-default-color:              @gray-dark;
+@btn-default-color:              #444;
 @btn-default-bg:                 #e6e6e6;
-@btn-default-border:             transparent;
+@btn-default-border:             @btn-default-bg;
 
 @btn-primary-color:              #fff;
 @btn-primary-bg:                 @global-primary;
-@btn-primary-border:             darken(@btn-primary-bg, 5%);
+@btn-primary-border:             @btn-primary-bg;
 
 @btn-secondary-color:            #fff;
 @btn-secondary-bg:               @global-secondary;
-@btn-secondary-border:           darken(@btn-secondary-bg, 5%);
+@btn-secondary-border:           @global-secondary;
 
 @btn-success-color:              #fff;
 @btn-success-bg:                 @global-success;
-@btn-success-border:             darken(@btn-success-bg, 5%);
+@btn-success-border:             @global-success;
 
 @btn-warning-color:              #fff;
 @btn-warning-bg:                 @global-warning;
-@btn-warning-border:             darken(@btn-warning-bg, 5%);
+@btn-warning-border:             @btn-warning-bg;
 
 @btn-danger-color:               #fff;
 @btn-danger-bg:                  @global-danger;
-@btn-danger-border:              darken(@btn-danger-bg, 5%);
+@btn-danger-border:              @btn-danger-bg;
 
 @btn-link-disabled-color:        @gray-light;