Issue #5 Boton de Agregar a la lista

src/components/AddToList.jsx

@@ -1,5 +1,7 @@
 import React from "react";
+import {Button} from './Button';
+import './AddToList.scss';
 
 export const AddToList = (props) => {
-  return <button className='button'>Agregar a mi lista</button>
+  return <Button className='add-to-list' text='Agregar a mi lista'/>
 }

src/components/AddToList.scss

@@ -0,0 +1,5 @@
+.add-to-list {
+  --color: var(--accent);
+  --line-width: 3px;
+  font-size: 1.2em;
+}

src/components/Button.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import './Button.scss'
+
+export const Button = (props) => {
+  const className = props.className;
+  const text = props.text;
+  const type = props.type ? props.type : 'button'
+
+  return <button className={`${type} ${className}`}>{text}</button>
+}

src/components/Button.scss

@@ -0,0 +1,47 @@
+// Base
+.button {
+  --color: var(--black);
+
+  padding: .4em 1em;
+  border: none;
+  outline: none;
+
+  background-color: var(--white);
+  color: var(--color);
+
+  font-weight: 500;
+
+  cursor: pointer;
+
+  &.disabled, &[disabled] {
+    color: var(--gray-3);
+    cursor: not-allowed;
+  }
+}
+
+
+// Border
+.button {
+  --width: var(--line-width);
+
+  box-shadow: 0px 0px 0px var(--width) var(--color);
+  transition: box-shadow 200ms ease-in-out;
+
+  &:hover { --width: calc(2 * var(--line-width)); }
+  &:active { --color: var(--accent) }
+}
+
+
+.link {
+  display: inline;
+  border: none;
+  background-color: inherit;
+  padding: 0;
+  cursor: pointer;
+  color: var(--accent);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}