Merge pull request #1051 from ant-design/button-click-effect

Button click effect

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>
     );

site/static/style.less

@@ -361,7 +361,6 @@ footer ul li > h2 {
 }
 
 footer ul li > div {
-  text-align: left;
   margin: auto;
   margin: 10px 0;
 }
@@ -1541,6 +1540,10 @@ a.entry-link:hover .anticon-smile {
     padding-right: 30px;
   }
 
+  .prev-next-nav {
+    padding-left: 0;
+  }
+
   footer {
     text-align: center;
   }

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);
+	}
 }