pulse.js

// TOP LEVEL IMPORTS
import React from 'react';
import styled, {keyframes} from 'styled-components';

const pulse = keyframes`
 0% {
     transform: scale(0.9);
     box-shadow: 0 0 0 0 rgba(124, 196, 250, .7)
    }
 70% {
     transform: scale(1);
     box-shadow: 0 0 0 20px rgba(124, 196, 250, 0)
    }
 100% {
     transform:  scale(0.9);
    }
`;

const Button = styled.button`
  height: 46px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 12px 0px;
  border-radius: 5}px;
  background-color: #002159;
  color: #fff;
  border: 0px;
  line-height: 40px;
  letter-spacing: 0.025em;
  align-items: center;
  cursor: pointer;
`;

const Pulser = styled.div`
  animation: ${pulse} 2s infinite;
`;

export default ({children}) => {
  return (
    <Pulser>
      <Button>{children}</Button>
    </Pulser>
  );
};