body
{
	margin: 0;
	padding: 0;
}
.container
{
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: #111;
}
.container .box
{
	position: relative;
	width: 24px;
	height: 24px;
	background: #111;
	float: left;
	border: 1px solid rgba(0,0,0,.2);
	box-sizing: border-box;
	overflow: hidden;
}
.container .box:before
{
	content: '';
	position: absolute;
	top: 6px;
	left: 6px;
	bottom: 6px; 
	right: 6px;
	background: #1d1d1d;
	box-shadow: 0 1px 4px rgba(0,0,0,1);
  	transition: 10000000000s ease-in-out;
}
.container .box:hover:before
{
  	transition: 0s ease-in-out;
}
.container .box:nth-child(9n+1):hover:before
{
	background: #f00;
  	transition: 0s ease-in-out;
  	box-shadow: 0 0 3px #f00,
  				0 0 10px #f00;
}
.container .box:nth-child(9n+2):hover:before
{
	background: #0f0;
  	box-shadow: 0 0 3px #0f0,
  				0 0 10px #0f0;
}
.container .box:nth-child(9n+3):hover:before
{
	background: #00f;
  	box-shadow: 0 0 3px #00f,
  				0 0 10px #00f;
}
.container .box:nth-child(9n+4):hover:before
{
	background: #ff0;
  	box-shadow: 0 0 3px #ff0,
  				0 0 10px #ff0;
}
.container .box:nth-child(9n+5):hover:before
{
	background: #0ff;
  	box-shadow: 0 0 3px #0ff,
  				0 0 10px #0ff;
}
.container .box:nth-child(9n+6):hover:before
{
	background: #f0f;
  	box-shadow: 0 0 3px #f0f,
  				0 0 10px #f0f;
}
.container .box:nth-child(9n+7):hover:before
{
	background: #e91e63;
  	box-shadow: 0 0 3px #e91e63,
  				0 0 10px #e91e63;
}
.container .box:nth-child(9n+8):hover:before
{
	background: #00ffad;
  	box-shadow: 0 0 3px #00ffad,
  				0 0 10px #00ffad;
}
.container .box:nth-child(9n+9):hover:before
{
	background: #f45103;
  	box-shadow: 0 0 3px #f45103,
  				0 0 10px #f45103;
}

a{
    display: inline-block;
    width: 120px;
    padding: 20px;
    background-color: #f00;
    color: #ff0;
    text-decoration: none;
    text-align: center;
    position: relative;
    border: none;
    border-radius: 10px;
    left: 45%;

}