<div class="container">

<div class="neumo02 d-flex">
  <h1 class="mes01">Hover Me</h1>
  <h1 class="mes02">Click Me</h1>
  <h1 class="mes03">❤️👀✌️</h1>
</div>

</div>
body{
  background:#d0dee7;
}

.container{
  margin:3rem 5rem;
}
.d-flex{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
}

h1{
  font-size:2rem;
  color:#a0a0a0;
}


.neumo02{
  width:250px;
  height:250px;
  margin:2rem;
border-radius: 50px;
background: linear-gradient(145deg, #dfeef7, #bbc8d0);
box-shadow:  20px 20px 31px #adb8c0,
             -20px -20px 31px #f3ffff;
  .mes02,.mes03{
    display:none;
  }
}

.neumo02:hover{
  width:250px;
  height:250px;
  margin:2rem;
  border-radius: 50px;
background: linear-gradient(145deg, #bbc8d0, #dfeef7);
box-shadow:  20px 20px 31px #adb8c0,
             -20px -20px 31px #f3ffff;
  .mes01,.mes03{
    display:none;
  }
  .mes02{
    display:block;
  }
}



.neumo02:active{
  width:250px;
  height:250px;
  margin:2rem;
border-radius: 50px;
background: #d0dee7;
box-shadow: inset 20px 20px 31px #adb8c0,
            inset -20px -20px 31px #f3ffff;
  .mes01,.mes02{
    display:none;
  }
  .mes03{
    display:block;
  }
}

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.