diff --git a/crabfit-frontend/src/components/Button/Button.tsx b/crabfit-frontend/src/components/Button/Button.tsx
index 896d574..b17ee4e 100644
--- a/crabfit-frontend/src/components/Button/Button.tsx
+++ b/crabfit-frontend/src/components/Button/Button.tsx
@@ -1,16 +1,13 @@
-import { Wrapper, Top, Bottom } from './buttonStyle';
+import { Pressable } from './buttonStyle';
 
-const Button = ({
-	buttonHeight,
-	buttonWidth,
-  primaryColor,
-  secondaryColor,
-	...props
-}) => (
-	<Wrapper buttonHeight={buttonHeight} buttonWidth={buttonWidth}>
-		<Top primaryColor={primaryColor} secondaryColor={secondaryColor} {...props} />
-		<Bottom secondaryColor={secondaryColor} />
-	</Wrapper>
+const Button = ({ href, type = 'button', ...props }) => (
+	<Pressable
+    type={href ? undefined : type}
+    role="button"
+    as={href ? 'a' : 'button'}
+    href={href}
+    {...props}
+  />
 );
 
 export default Button;
diff --git a/crabfit-frontend/src/components/Button/buttonStyle.ts b/crabfit-frontend/src/components/Button/buttonStyle.ts
index c3a6338..7779d1d 100644
--- a/crabfit-frontend/src/components/Button/buttonStyle.ts
+++ b/crabfit-frontend/src/components/Button/buttonStyle.ts
@@ -1,40 +1,60 @@
 import styled from '@emotion/styled';
 
-export const Wrapper = styled.div`
-	display: inline-block;
-	position: relative;
+export const Pressable = styled.button`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  cursor: pointer;
+  border: 0;
+  text-decoration: none;
+  font: inherit;
+  box-sizing: border-box;
+  background: ${props => props.primaryColor || props.theme.primary};
+  color: #FFF;
+  font-weight: 600;
+	text-shadow: 0 -1px .5px ${props => props.secondaryColor || props.theme.primaryDark};
+  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
+  border-radius: 3px;
+  padding: ${props => props.small ? '.4em 1.3em' : '.6em 1.5em'};
+  transform-style: preserve-3d;
+  margin-bottom: 5px;
 
-	--btn-height: ${props => props.buttonHeight || '40px'};
-	--btn-width: ${props => props.buttonWidth || '100px'};
+  ${props => props.size && `
+    padding: 0;
+    height: ${props.size};
+    width: ${props.size};
+  `}
 
-	height: var(--btn-height);
-	width: var(--btn-width);
-`;
+  &::before {
+    content: '';
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    background: ${props => props.secondaryColor || props.theme.primaryDark};
+    border-radius: inherit;
+    transform: translate3d(0, 5px, -1em);
+    transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
+  }
 
-export const Top = styled.button`
-	border: 0;
-	cursor: pointer;
-	font: inherit;
-	box-sizing: border-box;
-	background: ${props => props.primaryColor || props.theme.primary};
-	color: #FFF;
-	font-weight: 600;
-	text-shadow: 0 -1.5px .5px ${props => props.secondaryColor || props.theme.primaryDark};
-	padding: 0;
-	border-radius: 3px;
-	height: var(--btn-height);
-	width: var(--btn-width);
-	position: absolute;
-	top: -4px;
-	left: 0;
-	user-select: none;
-	transition: top .15s;
+  &:hover {
+    transform: translate(0, 1px);
+    &::before {
+      transform: translate3d(0, 4px, -1em);
+    }
+  }
 
-	&:active {
-		top: 0;
-	}
+  &:active {
+    transform: translate(0, 5px);
+    &::before {
+      transform: translate3d(0, 0, -1em);
+    }
+  }
 
-	${props => props.isLoading && `
+  ${props => props.isLoading && `
 		text-shadow: none;
 		color: transparent;
 		cursor: wait;
@@ -84,11 +104,3 @@ export const Top = styled.button`
     }
 	`}
 `;
-
-export const Bottom = styled.div`
-	box-sizing: border-box;
-	background: ${props => props.secondaryColor || props.theme.primaryDark};
-	border-radius: 3px;
-	height: var(--btn-height);
-	width: var(--btn-width);
-`;
diff --git a/crabfit-frontend/src/components/CalendarField/CalendarField.tsx b/crabfit-frontend/src/components/CalendarField/CalendarField.tsx
index 0844a8b..5957d0a 100644
--- a/crabfit-frontend/src/components/CalendarField/CalendarField.tsx
+++ b/crabfit-frontend/src/components/CalendarField/CalendarField.tsx
@@ -122,10 +122,8 @@ const CalendarField = ({
         <>
     			<CalendarHeader>
     				<Button
-    					buttonHeight="30px"
-    					buttonWidth="30px"
+    					size="30px"
     					title={t('form.dates.tooltips.previous')}
-    					type="button"
     					onClick={() => {
     						if (month-1 < 0) {
     							setYear(year-1);
@@ -137,10 +135,8 @@ const CalendarField = ({
     				>&lt;</Button>
     				<span>{dayjs.months()[month]} {year}</span>
     				<Button
-    					buttonHeight="30px"
-    					buttonWidth="30px"
+    					size="30px"
     					title={t('form.dates.tooltips.next')}
-    					type="button"
     					onClick={() => {
     						if (month+1 > 11) {
     							setYear(year+1);
diff --git a/crabfit-frontend/src/components/Donate/Donate.tsx b/crabfit-frontend/src/components/Donate/Donate.tsx
index 30ced8c..0933612 100644
--- a/crabfit-frontend/src/components/Donate/Donate.tsx
+++ b/crabfit-frontend/src/components/Donate/Donate.tsx
@@ -97,7 +97,9 @@ const Donate = () => {
 
   return (
   	<Wrapper>
-  		<a
+			<Button
+				small
+        title={t('donate.title')}
         onClick={event => {
           if (store.TWA) {
             gtag('event', 'donate', { 'event_category': 'donate' });
@@ -116,15 +118,7 @@ const Donate = () => {
         target="_blank"
         rel="noreferrer"
         ref={buttonRef}
-      >
-  			<Button
-  				buttonHeight="30px"
-  				buttonWidth={`${Math.max(t('donate.button').length*10, 90)}px`}
-  				type="button"
-  				tabIndex="-1"
-          title={t('donate.title')}
-  			>{t('donate.button')}</Button>
-  		</a>
+			>{t('donate.button')}</Button>
 
       <Options
         isOpen={isOpen}
diff --git a/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx b/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx
index 74f5694..2ec5bf0 100644
--- a/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx
+++ b/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx
@@ -100,7 +100,6 @@ const GoogleCalendar = ({ timeZone, timeMin, timeMax, onImport }) => {
     		  <Button
             onClick={() => signIn()}
             isLoading={signedIn === undefined}
-            buttonWidth={`${Math.max(t('event:you.google_cal.login').length*10, 270)}px`}
             primaryColor="#4286F5"
             secondaryColor="#3367BD">
             <LoginButton>
@@ -156,8 +155,7 @@ const GoogleCalendar = ({ timeZone, timeMin, timeMax, onImport }) => {
             <>
               <Info>{t('event:you.google_cal.info')}</Info>
               <Button
-                buttonWidth="170px"
-                buttonHeight="35px"
+                small
                 isLoading={freeBusyLoading}
                 disabled={freeBusyLoading}
                 onClick={() => importAvailability()}
diff --git a/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx b/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx
index ce62594..2edcf88 100644
--- a/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx
+++ b/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx
@@ -167,7 +167,6 @@ const OutlookCalendar = ({ timeZone, timeMin, timeMax, onImport }) => {
     		  <Button
             onClick={() => signIn()}
             isLoading={client === undefined}
-            buttonWidth={`${Math.max(t('event:you.outlook_cal').length*10, 270)}px`}
             primaryColor="#0364B9"
             secondaryColor="#02437D">
             <LoginButton>
@@ -223,8 +222,7 @@ const OutlookCalendar = ({ timeZone, timeMin, timeMax, onImport }) => {
             <>
               <Info>{t('event:you.google_cal.info')}</Info>
               <Button
-                buttonWidth="170px"
-                buttonHeight="35px"
+                small
                 isLoading={freeBusyLoading}
                 disabled={freeBusyLoading}
                 onClick={() => importAvailability()}
diff --git a/crabfit-frontend/src/pages/Create/Create.tsx b/crabfit-frontend/src/pages/Create/Create.tsx
index 312d19d..4f7d239 100644
--- a/crabfit-frontend/src/pages/Create/Create.tsx
+++ b/crabfit-frontend/src/pages/Create/Create.tsx
@@ -231,7 +231,7 @@ const Create = ({ offline }) => {
 
       					<Error open={!!error} onClose={() => setError(null)}>{error}</Error>
 
-      					<Button type="submit" isLoading={isLoading} disabled={isLoading} buttonWidth="100%">{t('home:form.button')}</Button>
+      					<Button type="submit" isLoading={isLoading} disabled={isLoading} style={{ width: '100%' }}>{t('home:form.button')}</Button>
       				</CreateForm>
             )}
     			</StyledMain>
diff --git a/crabfit-frontend/src/pages/Event/Event.tsx b/crabfit-frontend/src/pages/Event/Event.tsx
index 6b64e8e..39e2bf3 100644
--- a/crabfit-frontend/src/pages/Event/Event.tsx
+++ b/crabfit-frontend/src/pages/Event/Event.tsx
@@ -349,7 +349,6 @@ const Event = (props) => {
 											type="submit"
 											isLoading={isLoginLoading}
 											disabled={isLoginLoading || isLoading}
-                      buttonWidth={`${Math.max(t('event:form.button').length*11, 100)}px`}
 										>{t('event:form.button')}</Button>
 									</LoginForm>
 									<Error open={!!error} onClose={() => setError(null)}>{error}</Error>
diff --git a/crabfit-frontend/src/pages/Help/Help.tsx b/crabfit-frontend/src/pages/Help/Help.tsx
index 57bab1b..4196595 100644
--- a/crabfit-frontend/src/pages/Help/Help.tsx
+++ b/crabfit-frontend/src/pages/Help/Help.tsx
@@ -84,7 +84,7 @@ const Help = () => {
 
 			<AboutSection id="about">
 				<StyledMain>
-					<Center><Button buttonWidth="230px" onClick={() => push('/')}>{t('common:cta')}</Button></Center>
+					<Center><Button onClick={() => push('/')}>{t('common:cta')}</Button></Center>
 				</StyledMain>
 			</AboutSection>
 
diff --git a/crabfit-frontend/src/pages/Privacy/Privacy.tsx b/crabfit-frontend/src/pages/Privacy/Privacy.tsx
index e9f0eff..b3af673 100644
--- a/crabfit-frontend/src/pages/Privacy/Privacy.tsx
+++ b/crabfit-frontend/src/pages/Privacy/Privacy.tsx
@@ -83,7 +83,7 @@ const Privacy = () => {
 
 			<AboutSection id="about">
 				<StyledMain>
-					<Center><Button buttonWidth="230px" onClick={() => push('/')}>{t('common:cta')}</Button></Center>
+					<Center><Button onClick={() => push('/')}>{t('common:cta')}</Button></Center>
 				</StyledMain>
 			</AboutSection>