Untitled

<div id="blok">

  <div id="center">Tap It.</div>

</div>

<div id="footer">

</div>

#blok {

  background-color: lightblue;

  width: 400px;

  height: 400px;

  padding: 20px;

  position: absolute;

  left: 50%;

  margin-left: -200px;

  top: 50%;

  margin-top: -200px;

  border-radius: 50%;

  background: linear-gradient(220deg, magenta 10%, red 60%, orange);

}

#center {

  border-radius: 50%;

  width: 200px;

  height: 200px;

  background-color: #fff;

  position: absolute;

  top: 50%;

  left: 50%;

  margin-left: -100px;

  margin-top: -100px;

  text-align: center;

  line-height: 200px;

  font-size: 2em;

  font-style: italic;

  font-weight: lighter;

  transition: background-color .5s, color 5s .3s;

  color: pink;

  background-color: black;

}

#center:hover {

  background-color: #eee;

  color: red;

}

#footer {

  background-color: black;

  position: absolute;

  bottom: 0;

  height: 40px;

  width: 100%;

}