import React from 'react';
import {css} from 'emotion';
import { omit, joinClasses } from '../shared/utils';
import {
  withBootStrap,
  buildClassName,
  bootStrapPropTypes
} from '../shared/BootStrapHOC';
import {shadows, metrics} from "../shared/ThemeData";


export const FourtyFiveEffect = css`
  background-image: linear-gradient(
    -45deg,
    transparent 50%,
    rgba(0,0,0,0.1) 50.01%,
    rgba(0,0,0,0.1) 100%
  );
  background-size: 250%;
  background-position: 99% 99%;
  &:hover, &:focus, &:active {
    box-shadow: 0 0.4em 0.25em -0.2em rgba(0, 0, 0, 0.15);
    background-position: 0 0;
    transform: translate(0, -0.1em);
    transition: transform 160ms ease, background-position 240ms linear;
  }
`;

/*
transition: background .25s ease-in-out;
    transition: box-shadow .25s ease-in-out;
 */
const componentStyle = css`
    ${FourtyFiveEffect};
    border-width: 0;
    cursor: pointer;
    text-transform: uppercase;
    text-shadow: ${shadows.textDark};
    &:disabled {
      cursor: not-allowed;
    }
`;

const linkStyle = css`
  background-image: none;
  text-shadow: none;
`;

const outlineStyle = css`
  background-image: none;
  text-shadow: none !important;
  border-width: 1px;
  .btn-outline-light:hover {
    background-color: rgba(0,0,0,0.1);
  }
`;


class BButton extends React.PureComponent {

  handleClick = e => {
    const {disabled, onClick} = this.props;

    if (disabled) {
      e.preventDefault();
      e.stopPropagation();
      return;
    }

    if (onClick) {
      onClick(event);
    }
  };

  render () {
    let {type, tabIndex, ariaRole, ...rest} = this.props,
        cleanedProps                          = omit(bootStrapPropTypes, rest);

    type = type || 'button';

    if (this.props.disabled) {
      // TODO adding 'pointer-events: none;' CSS
      tabIndex = -1;
    }

    return (
      <button
        type={type}
        role={ariaRole || 'button'}
        tabIndex={tabIndex}
        onClick={this.handleClick}
        className={joinClasses(buildClassName(this.props), componentStyle,
          'custom',
          (this.props.outline ? outlineStyle : null),
          (this.props.link ? linkStyle : null))}
        {...cleanedProps}
      >
        {this.props.children}
      </button>
    );
  }
}

export default withBootStrap('btn')(BButton);

@@ -255,16 +255,79 @@
 Data%22;%0A%0A
+//    transform: translate(0, -0.1em);%0A// transform 160ms ease,
 %0Aexport 
@@ -674,72 +674,38 @@
 rans
-form: translate(0, -0.1em);%0A    transition: transform 16
+ition: box-shadow 12
 0ms 
-ease
+linear
 , ba

Change button styles