kitten.sh
1import React from 'react';
2import styled, { css } from 'styled-components';
3
4export const buttonLinkStyling = css`
5 background: white;
6 color: #383838;
7 font-weight: normal;
8 font-size: 1.4rem;
9 font-style: normal;
10 font-stretch: normal;
11 height: 4rem;
12 line-height: 4rem;
13 padding: 0 2rem;
14 letter-spacing: 0.01rem;
15 text-align: center;
16 text-transform: uppercase;
17 transition: opacity 0.4s ease-out;
18
19 &:hover {
20 opacity: 0.8;
21 }
22 &:active {
23 opacity: 0.6;
24 }
25`;
26
27const ButtonNoBorder = styled.button`
28 border: none;
29`;
30
31export const Button = styled(props => (
32 <ButtonNoBorder {...props}>{props.children}</ButtonNoBorder>
33))`
34 ${buttonLinkStyling}
35`;