Button example v2

button.js

/* global window */
import React from "react";
import classNames from "classnames";

const Button = ({
  dark,
  light,
  disabled = false,
  onPressed,
  width = 200,
  height = 50,
  type = "button",
  children,
  className,
  ...otherProps
}) => {
  const buttonStyle = {
    width: width,
    height: height
  };

  let classes = classNames(
    className,
    "button flex-parent flex-parent--column flex-parent--center-cross flex-parent--center-main",
    { dark: dark },
    { light: light },
    { disabled: disabled }
  );

  return (
    <button
      style={buttonStyle}
      disabled={disabled}
      className={classes}
      type={type}
      {...otherProps}
    >
      {children}
      <style jsx>{`
        .button {
        }
        .button:focus {
          outline: 0;
        }

        .button:enabled {
          transition: all 0.2s ease;
          cursor: pointer;
        }
        .button:disabled {
          cursor: not-allowed;
        }

        .dark {
          border: solid 1px transparent;
          background-image: linear-gradient(to left, #2e2e2e, #0b0b0b);
        }
        .dark:enabled:hover {
          background-image: linear-gradient(to left, #4c4c4c, #292929);
        }
        .dark:enabled:active {
          box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.5);
          background-image: linear-gradient(to left, #4c4c4c, #292929);
        }

        .light {
          border: solid 1px #2e2e2e;
          background-color: #fbfbfd;
        }
        .light:enabled:hover {
          background-color: #ffffff;
          border: solid 1px #333333;
        }
        .light:enabled:active {
          box-shadow: inset 0 2px 5px 0 #e1e1e3;
          background-color: #ffffff;
          border: solid 1px #333333;
        }
      `}</style>
    </button>
  );
};

export default Button;