TODO HOVER: Efecto Underline Reveal

viernes, 3 de junio de 2022
Efecto Underline Reveal - Subrayar revelar

Ejemplo

<p class="hvr-underline-reveal" style="padding:60px 30px;background:orange;width:100;height:40;text-align:center;font-size:30px;color:blue;font-weight:600;">Ejemplo</p>

  <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/>
<style>

/* Underline Reveal -  Subrayar revelar*/
.hvr-underline-reveal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-underline-reveal:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  height: 4px;
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-reveal:hover:before, .hvr-underline-reveal:focus:before, .hvr-underline-reveal:active:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
</style>