diff --git a/web/e.cash/components/button/index.js b/web/e.cash/components/button/index.js
new file mode 100644
--- /dev/null
+++ b/web/e.cash/components/button/index.js
@@ -0,0 +1,55 @@
+import { ButtonCtn, ButtonMain, ButtonInner } from './styles.js';
+
+/******
+Button Props
+text = String: the text that will be displayed in the button
+link = String: the link for the button
+corner = String: accepts "topLeft", "topRight", "bottomRight", "bottomLeft", clips the corner of the button
+color = String: accepts "accent" or "white". If no option is given button defaults to primary theme color
+glow = Boolean: adds a glow behind the button
+******/
+
+;
+
+export default function Button({
+ text = 'Button',
+ link = '/',
+ corner = null,
+ color = null,
+ glow = false,
+}) {
+ const corners = {
+ topLeft: {
+ outer: 'polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px)',
+ inner: 'polygon(19px 0, 100% 0, 100% 100%, 0 100%, 0 19px)',
+ },
+ topRight: {
+ outer: 'polygon(0 0, calc(100% - 20px) 0%, 100% calc(0% + 20px), 100% 100%, 0 100%)',
+ inner: 'polygon(0 0, calc(100% - 19px) 0%, 100% calc(0% + 19px), 100% 100%, 0 100%)',
+ },
+ bottomRight: {
+ outer: 'polygon(100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 0',
+ inner: 'polygon(100% 0, 100% calc(100% - 19px), calc(100% - 19px) 100%, 0 100%, 0 0',
+ },
+ bottomLeft: {
+ outer: 'polygon(100% 0, 100% 100%, 20px 100%, 0 calc(100% - 20px), 0 0',
+ inner: 'polygon(100% 0, 100% 100%, 19px 100%, 0 calc(100% - 19px), 0 0',
+ },
+ };
+ return (
+
+
+
+ {text}
+
+
+
+ );
+}
diff --git a/web/e.cash/components/button/styles.js b/web/e.cash/components/button/styles.js
new file mode 100644
--- /dev/null
+++ b/web/e.cash/components/button/styles.js
@@ -0,0 +1,83 @@
+import styled from 'styled-components';
+import Link from 'next/link';
+import { stealth } from '/styles/theme';
+
+export const ButtonCtn = styled.div`
+ ${props =>
+ props.glow &&
+ `filter: drop-shadow(0px 0px 10px ${
+ props.color === 'accent'
+ ? props.theme.colors.accent + '90'
+ : props.color === 'white'
+ ? props.theme.colors.contrast + '90'
+ : props.theme.colors.primaryLight + '90'
+ });`}
+`;
+
+export const ButtonMain = styled(Link)`
+ display: inline-flex;
+ padding: 2px;
+ align-items: center;
+ transition: all 300ms ease-in-out;
+ color: ${props =>
+ props.color === 'accent'
+ ? props.theme.colors.accent
+ : props.color === 'white'
+ ? props.theme.colors.contrast
+ : props.theme.colors.primaryLight};
+ font-size: 15px;
+ line-height: 1.5;
+ font-weight: 400;
+ letter-spacing: 1px;
+ background-color: ${props =>
+ props.color === 'accent'
+ ? props.theme.colors.accent
+ : props.color === 'white'
+ ? props.theme.colors.contrast
+ : props.theme.colors.primaryLight};
+ ${props =>
+ props.theme === stealth
+ ? 'background-color: #fff !important; color: #fff !important; '
+ : null};
+`;
+
+export const ButtonInner = styled.div`
+ background-color: ${props => props.theme.colors.darkBlue};
+ padding: 16px 40px;
+ font-size: 15px;
+ line-height: 1.5;
+ font-weight: 500;
+ letter-spacing: 1px;
+ transition: all ease-in-out 150ms;
+
+ &:hover {
+ box-shadow: inset 0 0 13px 2px
+ ${props =>
+ props.color === 'accent'
+ ? props.theme.colors.accent + '90'
+ : props.color === 'white'
+ ? props.theme.colors.contrast + '90'
+ : props.theme.colors.primaryLight + '90'};
+ animation: hoverbutton 150ms ease-in-out 1;
+ }
+
+ @keyframes hoverbutton {
+ 0% {
+ background-color: ${props =>
+ props.color === 'accent'
+ ? props.theme.colors.accent
+ : props.color === 'white'
+ ? props.theme.colors.contrast
+ : props.theme.colors.primaryLight} !important;
+ }
+ 100% {
+ background-color: unset;
+ }
+ }
+ ${props => props.theme.breakpoint.medium} {
+ .buttoninner {
+ padding: 14px 30px;
+ font-size: 14px;
+ }
+ }
+`;
diff --git a/web/e.cash/pages/index.js b/web/e.cash/pages/index.js
--- a/web/e.cash/pages/index.js
+++ b/web/e.cash/pages/index.js
@@ -4,7 +4,8 @@
import VideoBackground from '/components/videobackground';
import GlitchText from '/components/glitch-text';
import { socials } from '/data/socials';
-import { Hero } from '/styles/pages/homepage';
+import { Hero, ButtonCtn } from '/styles/pages/homepage';
+import Button from '/components/button';
export default function Home() {
return (
@@ -22,6 +23,14 @@
Experience the revolutionary new money powered by
Avalanche.
+
+
+
{socials.map(social => (