diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx
new file mode 100644
index 0000000..fe463df
--- /dev/null
+++ b/src/components/Button/Button.jsx
@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import { Btn } from "./Button.styled"
+
+function Button({ text, onClick, background, color, border, hoverBackground, hoverColor }) {
+  return (
+    <Btn onClick={onClick} style={{ background, color, border }} hoverBackground={hoverBackground} hoverColor={hoverColor}>
+      {text}
+    </Btn>
+  );
+}
+
+Button.propTypes = {
+  text: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired, 
+  background: PropTypes.string,
+  color: PropTypes.string,
+  border: PropTypes.string,
+  hoverBackground: PropTypes.string,
+  hoverColor: PropTypes.string, 
+}
+
+export default Button;
+
+
+
diff --git a/src/components/Button/Button.styled.jsx b/src/components/Button/Button.styled.jsx
new file mode 100644
index 0000000..8e94b1f
--- /dev/null
+++ b/src/components/Button/Button.styled.jsx
@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+export const Btn = styled.button`
+background: ${(props) => props.background};
+color: ${(props) => props.color};
+border: ${(props) => props.border};
+padding: 16px 60px;
+justify-content: center;
+align-items: center;
+border-radius: 12px;
+  
+  &:hover {
+    background: ${(props) => props.hoverBackground};
+    color: ${(props) => props.hoverColor};
+  }
+`;
\ No newline at end of file