BytecodeAgency
diff --git a/‎content/posts/bytecast.mdx‎
Lines changed: 1 addition & 1 deletion b/‎content/posts/bytecast.mdx‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎src/components/Button/Button.components.tsx‎
Lines changed: 5 additions & 2 deletions b/‎src/components/Button/Button.components.tsx‎
Lines changed: 5 additions & 2 deletions
diff --git a/‎src/components/Button/Button.tsx‎
Lines changed: 8 additions & 1 deletion b/‎src/components/Button/Button.tsx‎
Lines changed: 8 additions & 1 deletion
diff --git a/‎src/components/Button/Button.types.ts‎
Lines changed: 1 addition & 0 deletions b/‎src/components/Button/Button.types.ts‎
Lines changed: 1 addition & 0 deletions
@@ -1,6 +1,6 @@
 ---
 id: 99
-title: 'Bytecast: de podcast van Bytecode'
+title: 'De podcast van Bytecode'
 description: 'Elke eerste maandag van de maand brengt Bytecode een nieuwe podcastaflevering uit van de Bytecast. Luister het hier!'
 keywords: 'podcast, bytecast, bytecode, bytecodeagency'
 posted_on: '2 november 2020'
 
@@ -4,7 +4,7 @@ import theme from '../../styles/theme';
 
 const { size, height, spacing, font, weight, color } = theme.typography.button;
 
-const buttonStyle = css<{ disabled?: boolean }>`
+const buttonStyle = css<{ disabled?: boolean; wide?: boolean }>`
     display: inline-block;
     background: transparent;
     padding: 0.66em 2em;
@@ -20,6 +20,9 @@ const buttonStyle = css<{ disabled?: boolean }>`
     font-weight: ${weight};
     color: ${color};
     text-decoration: none;
+    ${(props) => props.wide && 'width: 450px;'};
+    ${(props) => props.wide && 'max-width: 80vw;'};
+    ${(props) => props.wide && 'margin: 100px 0;'};
     &:hover {
         color: ${(props) =>
             props.disabled ? theme.colors.tertiary : theme.colors.white};
@@ -37,6 +40,6 @@ export const StyledGatsbyButton = styled(Link)<{ disabled?: boolean }>`
 export const StyledButton = styled.button<{ disabled?: boolean }>`
     ${buttonStyle}
 `;
-export const StyledAnchor = styled.a<{ disabled?: boolean }>`
+export const StyledAnchor = styled.a<{ disabled?: boolean; wide?: boolean }>`
     ${buttonStyle}
 `;
@@ -14,6 +14,7 @@ const Button: React.FC<ButtonProps> = ({
     target,
     onClick,
     disabled,
+    wide,
     children,
 }) => {
     if (useGatsbyLink) {
@@ -38,7 +39,13 @@ const Button: React.FC<ButtonProps> = ({
         );
     }
     return (
-        <StyledAnchor href={href} rel={rel} target={target} onClick={onClick}>
+        <StyledAnchor
+            wide={wide}
+            href={href}
+            rel={rel}
+            target={target}
+            onClick={onClick}
+        >
             {children}
         </StyledAnchor>
     );
 
@@ -7,6 +7,7 @@ export interface ButtonProps {
     submit?: boolean;
     target?: string;
     onClick?: () => void;
+    wide?: boolean;
     disabled?: boolean;
     children: React.ReactNode;
 }
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@ export interface ButtonProps {`
`7`	`7`	`submit?: boolean;`
`8`	`8`	`target?: string;`
`9`	`9`	`onClick?: () => void;`
	`10`	`+ wide?: boolean;`
`10`	`11`	`disabled?: boolean;`
`11`	`12`	`children: React.ReactNode;`
`12`	`13`	`}`