aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/Buttons
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Buttons')
-rw-r--r--src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx11
-rw-r--r--src/components/Buttons/Buttons.module.scss34
-rw-r--r--src/components/Buttons/index.tsx3
3 files changed, 48 insertions, 0 deletions
diff --git a/src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx b/src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx
new file mode 100644
index 0000000..fd7fc62
--- /dev/null
+++ b/src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx
@@ -0,0 +1,11 @@
+import styles from '../Buttons.module.scss';
+
+const ButtonSubmit: React.FunctionComponent = ({ children }) => {
+ return (
+ <button type="submit" className={`${styles.btn} ${styles.submit}`}>
+ {children}
+ </button>
+ );
+};
+
+export default ButtonSubmit;
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
new file mode 100644
index 0000000..93dfb9d
--- /dev/null
+++ b/src/components/Buttons/Buttons.module.scss
@@ -0,0 +1,34 @@
+@use "@styles/abstracts/functions" as fun;
+
+.btn {
+ display: block;
+ padding: var(--spacing-2xs) var(--spacing-md);
+ border: none;
+ font-size: var(--font-size-md);
+}
+
+.submit {
+ margin: auto;
+ background: var(--color-primary);
+ border-radius: fun.convert-px(3);
+ box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-primary-dark);
+ color: var(--color-fg-inverted);
+ font-weight: 600;
+ text-shadow: fun.convert-px(2) fun.convert-px(2) 0 var(--color-shadow);
+ transition: all 0.3s ease-in-out 0s;
+
+ &:hover,
+ &:focus {
+ background: var(--color-primary-light);
+ box-shadow: fun.convert-px(7) fun.convert-px(7) 0 0
+ var(--color-primary-dark);
+ transform: translateX(#{fun.convert-px(-4)})
+ translateY(#{fun.convert-px(-4)});
+ }
+
+ &:active {
+ background: var(--color-primary-dark);
+ box-shadow: 0 0 0 0 var(--color-primary-dark);
+ transform: translateX(#{fun.convert-px(3)}) translateY(#{fun.convert-px(3)});
+ }
+}
diff --git a/src/components/Buttons/index.tsx b/src/components/Buttons/index.tsx
new file mode 100644
index 0000000..ea145ca
--- /dev/null
+++ b/src/components/Buttons/index.tsx
@@ -0,0 +1,3 @@
+import ButtonSubmit from './ButtonSubmit/ButtonSubmit';
+
+export { ButtonSubmit };