styled-test.js

// @flow
import React from 'react';
import styled, {keyframes, css} from 'styled-components';

function transform(percent: number, scale: number = 1) {
  return css`
		${percent}% {
			transform: scale(${scale});
		}
	`;
}

const pop = keyframes`
	${transform(0, 1)}
	${transform(50, 1.2)}
	${transform(90, 0.9)}
	${transform(100, 1)}
`;

const pulse = keyframes`
	50% {
		transform: scale(1.2);
		opacity: 1;
	}
	70% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
`;

function size(height: string, width: string = height) {
  return {
    height,
    width,
  };
}

const Span = styled.span`
	z-index: 1;
	transition: 0.5s;
	position: absolute;
	top: 1em;
`;

const s = 160;
const Wrap = styled.div`
	position: absolute;
	display: flex;
	align-items: center;
	top: 50%;
	left: 50%;
	margin-left: -${s / 2}px;
	margin-right: ${s / 2}px;
	text-align: center;
	cursor: pointer;
	${size(s + 'px')}
	&:before, &:after {
		${size(s + 'px')}
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		border: 1px solid deeppink;
		border-radius: 50%;
	}
	&:after {
		opacity: 0;
		background-color: deeppink;
		transform: scale(0.1);
	}
	&:hover {
		&:before {
			animation: ${pop} 0.5s;
		}
		&:after {
			animation: ${pulse} 0.5s;
			animation-fill-mode: forwards;
		}
		${Span} {
			color: #fff;
			transform: translateY(-5px) scale(1.5);
		}
	}
`;

const Item = styled.a`
	color: deeppink;
	font-size: 40px;
	line-height: 1em;
	text-decoration: none;
`;

const Menu = () => (
  <Wrap>
    <Item>
      <Span>
        Click Here
      </Span>
    </Item>
  </Wrap>
);

export default Menu;