new hover

by Pranab Dey

HTML

<div class="button">
  <div class="circle">
    <span class="front">hover me</span>
    <span class="back">leave mouse from red door</span>
  </div>
</div>

CSS

.button{
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: lightgrey;
  line-height: 200px;
  text-align: center;
  perspective: 400;
  -webkit-perspective: 400;
}
.button:before{
  content: 'hii, everyone';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: green;
  font-size: inherit;
}
.circle{
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotateY(0deg);
  box-shadow: 0 0 0 2px red;
  border-radius: 50%;
  transform-origin: left;
  background: red;
  transition: 0.4s ease-in-out;
}
span{
  font-family: helvetica;
  text-transform: capitalize;
  font-size: 20px;
}
span.front{
  display: block;
}
span.back{
  display: none;
}
.button:hover .circle{
  transform: translate(-50%, -50%) rotateY(-115deg);
  transition: 0.4s ease-in-out;
}
.button:hover span.front{
  display: none;
  transform: rotateY(0deg);
  transition: display 0.4s ease-in-out 1s;
}
.button:hover span.back{
  display: block;
  transform: rotateY(115deg);
}