PrettyBtns Added.

Author: codewithdpk

assets/svgs/arrow_right_dark.svg

@@ -0,0 +1,65 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
+
+.PRIMARY_FILLED_LARGE {
+  outline: none;
+  height: 50px;
+  width: 140px;
+  background: #448fff;
+  box-shadow: 2px 3px 20px rgba(0, 0, 0, 0.25);
+  border-radius: 10px;
+  border: none;
+  font-family: "Poppins", sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  color: #ffffff;
+  cursor: pointer;
+}
+
+.SECONDARY_LARGE {
+  outline: none;
+  height: 50px;
+  width: 140px;
+  background: #ffffff;
+  border: 2px solid #e5e5e5;
+  box-sizing: border-box;
+  box-shadow: -1px 2px 20px rgba(0, 0, 0, 0.15);
+  border-radius: 10px;
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.54);
+}
+
+.GET_STARTED_PRIMARY {
+  outline: none;
+  height: 50px;
+  width: 160px;
+  background: #448fff;
+  box-shadow: 2px 3px 20px rgba(0, 0, 0, 0.25);
+  border-radius: 10px;
+  border: none;
+  font-family: "Poppins", sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  color: #ffffff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ICONS {
+  height: 14px;
+  width: 14px;
+  margin-left: 15px;
+}
+
+.GET_STARTED_PRIMARY ICONS:hover {
+  height: 14px;
+  width: 14px;
+  margin-left: 15px;
+  transition: 0.6s ease-in;
+}

assets/svgs/arrow_right_white.svg

@@ -1,3 +1,4 @@
 import PrettyCard from "./pretty-card";
+import PrettyBtn from "./pretty-btns";
 
-export { PrettyCard };
+export { PrettyCard, PrettyBtn };

buttons.css

@@ -1,6 +1,6 @@
 {
   "name": "pretty-pretty",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Attractive Web UI components.",
   "main": "index.js",
   "scripts": {

index.js

@@ -0,0 +1,56 @@
+import React from "react";
+import "./buttons.css";
+import ic_arrow_right_dark from "./assets/svgs/arrow_right_dark.svg";
+import ic_arrow_right_white from "./assets/svgs/arrow_right_white.svg";
+
+const PrettyBtn = (props) => {
+  if (props.variant) {
+    switch (props.variant) {
+      case "PRIMARY_FILLED_LARGE":
+        return (
+          <button
+            className="PRIMARY_FILLED_LARGE"
+            onClick={props.onClick}
+            style={props.style}
+          >
+            {props.name || "Done"}
+          </button>
+        );
+        break;
+      case "SECONDARY_LARGE":
+        return (
+          <button
+            className="SECONDARY_LARGE"
+            onClick={props.onClick}
+            style={props.style}
+          >
+            {props.name || "Done"}
+          </button>
+        );
+        break;
+      case "GET_STARTED_PRIMARY":
+        return (
+          <button
+            className="GET_STARTED_PRIMARY"
+            onClick={props.onClick}
+            style={props.style}
+          >
+            {props.name || "Get Started"}{" "}
+            <img src={ic_arrow_right_white} className="ICONS" />
+          </button>
+        );
+    }
+  } else {
+    return (
+      <button
+        className="PRIMARY_FILLED_LARGE"
+        onClick={props.onClick}
+        style={props.style}
+      >
+        {props.name || "Done"}
+      </button>
+    );
+  }
+};
+
+export default PrettyBtn;