Add transparent button

2 files changed, 25 insertions, 10 deletions

diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index e67f8a8e1..df784b8ef 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -3,12 +3,13 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
-export interface ButtonInterface {
+export interface Props extends ButtonInterface {
     text: string;
-    transparent?: any;
+    transparent?: boolean;
+    inline?: boolean;
 }
 
-const StyledButton = styled.button<ButtonInterface>`
+const StyledButton = styled.button<Props>`
     appearance: none;
     border: 0;
     background-color: ${colors.brandLight};
@@ -17,8 +18,16 @@ const StyledButton = styled.button<ButtonInterface>`
     padding: 13px 22px 14px;
 
     ${props => props.transparent && `
+        background-color: transparent;
         border: 1px solid #6A6A6A;
     `}
+
+    ${props => props.inline && `
+        display: inline-block;
+        & + & {
+            margin-left: 10px;
+        }
+    `}
 `;
 
 const Text = styled.span`
@@ -27,9 +36,15 @@ const Text = styled.span`
     line-height: 1.375rem;
 `;
 
-export const Button: React.StatelessComponent<ButtonInterface> = ({ text, transparent }) => (
-    <StyledButton transparent>
-        <Text>{text}</Text>
+export const Button: React.StatelessComponent<Props> = ({ ...props }) => (
+    <StyledButton {...props}>
+        <Text>{props.text}</Text>
+    </StyledButton>
+);
+
+export const ButtonTransparent: React.StatelessComponent<Props> = ({ ...props }) => (
+    <StyledButton transparent={true} {...props}>
+        <Text>{props.text}</Text>
     </StyledButton>
 );
 
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index abb01e11a..19eed5acf 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -19,10 +19,10 @@ export const NextLanding = () => (
         <Column colWidth="2/3">
           <Heading>Powering Decentralized Exchange</Heading>
           <Intro>0x is the best solution for adding exchange functionality to your business.</Intro>
-          <Icon>
-            <Button text="Get Started" />
-            <Button text="Learn More" transparent />
-          </Icon>
+          <div>
+            <Button text="Get Started" inline={true} />
+            <Button text="Learn More" transparent={true} inline={true} />
+          </div>
         </Column>
 
         <Column colWidth="1/3">