Add click effect for primary button, close #942

components/button/button.jsx

@@ -30,9 +30,17 @@ export default class Button extends React.Component {
       window.PIE.attach(findDOMNode(this));
     }
   }
+  handleClick() {
+    const buttonNode = findDOMNode(this);
+    buttonNode.className = buttonNode.className.replace(`${prefix}clicked`, '');
+    setTimeout(() => {
+      buttonNode.className += ` ${prefix}clicked`;
+    }, 10);
+    this.props.onClick();
+  }
   render() {
     const props = this.props;
-    const { type, shape, size, onClick, className, htmlType, children, ...others } = props;
+    const { type, shape, size, className, htmlType, children, ...others } = props;
 
     // large => lg
     // small => sm
@@ -53,7 +61,7 @@ export default class Button extends React.Component {
     const kids = React.Children.map(children, insertSpace);
 
     return (
-      <button {...others} type={htmlType || 'button'} className={classes} onClick={onClick}>
+      <button {...others} type={htmlType || 'button'} className={classes} onClick={this.handleClick.bind(this)}>
         {kids}
       </button>
     );

style/components/button.less

@@ -97,4 +97,26 @@
   > span + .@{iconfont-css-prefix} {
     margin-left: 0.5em;
   }
+
+  &-clicked:before {
+  	content: '';
+  	position: absolute;
+  	top: -6px;
+  	left: -6px;
+  	bottom: -6px;
+  	right: -6px;
+  	border-radius: inherit;
+  	z-index: -1;
+    background: inherit;
+  	opacity: 1;
+  	transform: scale3d(0.5, 0.5, 1);
+    animation: buttonEffect 0.48s ease forwards;
+  }
+}
+
+@keyframes buttonEffect {
+	to {
+		opacity: 0;
+		transform: scale3d(1, 1, 1);
+	}
 }