diff --git a/src/components/molecules/button.tsx b/src/components/molecules/button.tsx
index aa313f978..efadd2d52 100644
--- a/src/components/molecules/button.tsx
+++ b/src/components/molecules/button.tsx
@@ -50,20 +50,14 @@ export default function Button({
 	};
 
 	const inner = (
-		<div className={IconLeft ? styles.spaceIcon : ''}>
-			{IconLeft && (
-				<div className={styles.leftIcon}>
-					<IconLeft className={clsx(text && styles.iconLeftOfText)} />
-				</div>
-			)}
+		<>
+			{IconLeft && <IconLeft className={clsx(text && styles.iconLeftOfText)} />}
 
-			<div className={styles.text}>{text}</div>
+			{text}
 			{IconRight && (
-				<div>
-					<IconRight className={clsx(text && styles.iconRightOfText)} />
-				</div>
+				<IconRight className={clsx(text && styles.iconRightOfText)} />
 			)}
-		</div>
+		</>
 	);
 	return href ? (
 		<Link href={href} legacyBehavior>
diff --git a/src/components/molecules/buttonSocial.tsx b/src/components/molecules/buttonSocial.tsx
new file mode 100644
index 000000000..aa313f978
--- /dev/null
+++ b/src/components/molecules/buttonSocial.tsx
@@ -0,0 +1,77 @@
+import clsx from 'clsx';
+import Link from 'next/link';
+import React, { MouseEvent } from 'react';
+
+import styles from './button.module.scss';
+
+export type IButtonType =
+	| 'super'
+	| 'primary'
+	| 'primaryInverse'
+	| 'secondary'
+	| 'secondaryInverse'
+	| 'none';
+// | 'tertiary' someday
+
+type Props = {
+	type: IButtonType;
+	text?: JSX.Element | string;
+	href?: string;
+	onClick?: (e: MouseEvent<HTMLElement>) => void;
+	IconLeft?: React.ElementType;
+	IconRight?: React.ElementType;
+	target?: '_blank';
+	className?: string;
+	'aria-label'?: string;
+	disabled?: boolean;
+	centered?: boolean;
+};
+
+export default function Button({
+	type,
+	text,
+	href,
+	IconLeft,
+	IconRight,
+	className,
+	centered,
+	disabled,
+	...props
+}: Props): JSX.Element {
+	const _props = {
+		className: clsx(
+			styles.base,
+			styles[type],
+			centered && styles.centered,
+			disabled && styles.disabled,
+			className
+		),
+		...props,
+	};
+
+	const inner = (
+		<div className={IconLeft ? styles.spaceIcon : ''}>
+			{IconLeft && (
+				<div className={styles.leftIcon}>
+					<IconLeft className={clsx(text && styles.iconLeftOfText)} />
+				</div>
+			)}
+
+			<div className={styles.text}>{text}</div>
+			{IconRight && (
+				<div>
+					<IconRight className={clsx(text && styles.iconRightOfText)} />
+				</div>
+			)}
+		</div>
+	);
+	return href ? (
+		<Link href={href} legacyBehavior>
+			<a {..._props}>{inner}</a>
+		</Link>
+	) : (
+		<button disabled={disabled === true} {..._props}>
+			{inner}
+		</button>
+	);
+}
diff --git a/src/components/molecules/socialLogin.tsx b/src/components/molecules/socialLogin.tsx
index 706633a9d..524ab4bd9 100644
--- a/src/components/molecules/socialLogin.tsx
+++ b/src/components/molecules/socialLogin.tsx
@@ -16,7 +16,7 @@ import { setSessionToken } from '~lib/cookies';
 import useDidUnmount from '~lib/useDidUnmount';
 import { UserSocialServiceName } from '~src/__generated__/graphql';
 
-import Button from './button';
+import Button from './buttonSocial';
 import styles from './socialLogin.module.scss';
 
 export default function SocialLogin({