Create button component

app/src/components/Button/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import './styles.css';
+
+interface props extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+  children: string,
+  color?: 'link' | 'primary' | 'secondary',
+}
+
+const Button: React.FunctionComponent<props> = (props) => {
+  const color = props.color || 'secondary';
+  return (
+    <button  className={`cc-button cc-button-${color} ${props.className || ''}`} {...props} >
+      {props.children}
+    </button>
+  )
+}
+
+export default Button;

app/src/components/Button/styles.css

@@ -0,0 +1,75 @@
+@keyframes clickIt{
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.98);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+button.cc-button {
+  border: none;
+  background-color: #f4f5e3;
+  color: #867969;
+  padding: 0.5rem 1rem;
+  border-radius: 40px;
+}
+
+button.cc-button:hover {
+  animation: clickIt 200ms ease;
+  color: #796c5d;
+}
+
+button.cc-button:active {
+  animation: clickIt 200ms ease;
+}
+button.cc-button:focus,
+button.cc-button:active {
+  outline: none;
+}
+
+button.cc-button.cc-button-primary {
+  border: none;
+  background-color: #14c5b5;
+  border-radius: 17% 19% 14% 16% / 49% 37% 45% 41%  ;
+  color: white;
+  letter-spacing: 0.02rem;
+  padding: 0.5rem 1rem;
+}
+
+button.cc-button.cc-button-primary:hover {
+  color: white;
+  background-color: #13b6a8;
+}
+
+button.cc-button.cc-button-primary:focus,
+button.cc-button.cc-button-primary:active {
+  outline: none;
+  background-color: #13b6a8;
+}
+
+button.cc-button.cc-button-primary:disabled {
+  background-color: #cdc7bb;
+  color: #928b83;
+}
+
+button.cc-button.cc-button-primary:disabled:hover,
+button.cc-button.cc-button-primary:disabled:active,
+button.cc-button.cc-button-primary:disabled:focus {
+  transform: none;
+  transition: none;
+}
+
+button.cc-button.cc-button-link {
+  background-color: transparent;
+}
+
+button.cc-button.cc-button-link:hover {
+  background-color: transparent;
+  color: #e58541;
+  animation: none;
+
+}

app/src/components/Table/index.tsx

@@ -2,7 +2,7 @@ import React, { FunctionComponent } from 'react';
 import Critter, { Time, Month, Colors } from 'types';
 import { Table as Tb } from 'reactstrap';
 import Tag from 'components/Tag';
-
+import Button from 'components/Button';
 import moment from 'moment';
 // import { includes } from 'ramda';
 import { parseMonth } from 'services/DataParser';
@@ -87,6 +87,8 @@ const Table: FunctionComponent<TableProps> = ({ data }) => {
 
   return (
     <div className="cc-critter-schedule">
+      <Button>Show available now</Button>
+      <Button color='link'>link button yaya</Button>
       <Tb striped hover responsive className="critter-table">
         <thead>
           <tr>

app/src/components/Table/styles.css

@@ -20,6 +20,7 @@
 
 .table.critter-table td.critter-img {
   padding: 0;
+  text-align: center;
 }
 
 .table.critter-table tr td {
@@ -27,6 +28,10 @@
   text-transform: capitalize;
 }
 
+.critter-table.table-striped tbody tr:nth-of-type(odd) {
+  background-color: #d8d3b3;
+}
+
 td.critter-img img {
   width: 48px;
   height: auto;