diff --git a/src/Components/buttons/Button.css b/src/Components/buttons/Button.css new file mode 100644 index 0000000..498ea12 --- /dev/null +++ b/src/Components/buttons/Button.css @@ -0,0 +1,76 @@ +button{ + font-family: 'IRAN SANS'; + border: 0; + font-size: 0.7vw; +} +button.small{ + padding:3px 15px; + border-radius: 10px; + border:1px solid #1577F8; +} +button.medium{ + padding:10px 25px; + border-radius: 6px; + border:1px solid #1577F8; +} +button.large{ + padding:10px 45px; + border-radius: 15px; + border:3px solid #1577F8; +} +button.primary{ + border:0px; +} +button.primary.default{ + background:#1577F8 ; + color:white; + transition: all 0.2s; +} + +button.primary.default:hover{ + + color:white; + box-shadow: 0px 7px 20px rgba(120, 19, 42, 0.16); + cursor: pointer; +} +button.primary.default:active{ + background:#0D41E1 ; + color:white; +} +button.primary.disabled{ + background:#E8E8ED ; + color:white; + transition: all 0.2s; + +} +button.outlined.default{ + background: none; + color:#1577F8; + transition: all 0.2s; +} +button.outlined.default:hover{ + background: rgba(21,119,248,0.1); + color:#1577F8; + cursor:pointer; +} +button.outlined.disabled{ + background: none; + color:#E8E8ED; + border:2px solid #E8E8ED; +} + +button.text{ + border:0px; + color:#1577F8; + background: none; + transition: all 0.2s; +} +button.text:hover{ + border:0px; + color:#FDB79F; + background: none; + cursor: pointer; +} +button.text.disabled{ + color:#E8E8ED; +} \ No newline at end of file diff --git a/src/Components/buttons/Button.js b/src/Components/buttons/Button.js new file mode 100644 index 0000000..2e5776b --- /dev/null +++ b/src/Components/buttons/Button.js @@ -0,0 +1,43 @@ +import React from 'react'; +import './Button.css'; + +const Button = (props) =>{ + return( + + + + + ); +}; +export default Button; + + +/* + You Must Include The Title of the Button As A Parameter Of The Component + Like This: