Variable Buttons

Padding, width, height, text are optional, if not set there are default values (no css)

projekt/src/App.css

@@ -1,6 +1,4 @@
-
-
-.round-border-10
+.round-border
 {
     border-radius: 10px;
     border-width: 0;
@@ -12,7 +10,17 @@
     color: #ffffff;
 }
 
+.font-small
+{
+    font-size: 15px;
+}
+
 .font-middle
 {
     font-size: 20px ;
 }
+
+.font-big
+{
+    font-size: 30px;
+}

projekt/src/App.js

@@ -1,11 +1,10 @@
-import logo from './logo.svg';
 import './App.css';
 import Button from "./components/Button";
 
 function App() {
     return (
         <div className="App">
-            <Button text={"Test"} PaddingX={20} PaddingY={10}/>
+            <Button/>
         </div>
     );
 }

projekt/src/components/Button.jsx

@@ -2,14 +2,27 @@ import "../App.css"
 
 export default function Button(p) {
 
+    let text = p.text;
+    let paddingY = p.paddingY, paddingX = p.paddingX;
+    let width = p.width, height = p.height;
+    let color = p.color;
+
+    if (paddingY == null) paddingY = 10;
+    if (paddingX == null) paddingX = 20;
+    if (height == null) height = 50;
+    if (width == null) width = 100;
+
 
     return (
-        <button className={"default-button round-border-10 font font-middle"}
+        <button className={"default-button round-border font font-middle"}
                 style={{
-                    paddingTop: p.PaddingY,
-                    paddingBottom: p.PaddingY,
-                    paddingLeft: p.PaddingX,
-                    paddingRight: p.PaddingX
-                }}>{p.text}</button>
+                    paddingTop: paddingY,
+                    paddingBottom: paddingY,
+                    paddingLeft: paddingX,
+                    paddingRight: paddingX,
+                    width: width,
+                    height: height,
+                    color: color
+                }}>{text}</button>
     );
 }