I am in the process of creating a functionality where clicking on one element will fill another element's content from bottom to top.
Although I have managed to make it work on hover, the same functionality is not triggered when clicking on the element itself.
$(document).ready(function(){
$('.click-me').on('click', function(){
$('.button-grey').trigger('hover');
})
}).button-grey {
padding: 13px 40px;
display: inline-block;
border: 1px solid #969496;
position: relative;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
font-size: 11px;
background-image: linear-gradient(to top, #fff 50%, #969496 50%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.button-grey:before {
content:"";
z-index:-1;
position:absolute;
top:-1px;
left:0;
right:0;
bottom:0;
background-image: linear-gradient(to top, #969496 50%, transparent 50%);
}
.button-grey,
.button-grey:before {
background-size: 100% 200%;
background-position: top;
transition: background-position 0.5s ease-in-out;
}
.button-grey:hover,
.button-grey:hover:before{
background-position: bottom;
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="click-me">Click me</div>
<div class="button-grey"></div>I am currently exploring ways to achieve this desired outcome as depicted in the image: https://ibb.co/3Mq8PzL