TODO HOVER: Efecto curl-bottom-left - Rizo inferior izquierdo

viernes, 3 de junio de 2022

Efecto curl-bottom-left - Rizo inferior izquierdo

Ejemplo



<p class="hvr-curl-bottom-left" style="padding:60px 30px;background:crimson;width:100;height:40;text-align:center;font-size:30px;color:#ffffdf;font-weight:600;">Ejemplo</p>
 
 <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/>
<style>
/* Curl Bottom Left */
.hvr-curl-bottom-left {
  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;
}
.hvr-curl-bottom-left:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  bottom: 0;
  left: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(45deg, white 45%, #aaa 50%, #ccc 56%, white 80%);
  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
.hvr-curl-bottom-left:hover:before, .hvr-curl-bottom-left:focus:before, .hvr-curl-bottom-left:active:before {
  width: 25px;
  height: 25px;
}
</style>