How can I make my div retain the hover effect even after clicking on it? Here is the code snippet:
#work_btn{
position:absolute;
top:60%;
left:60px;
color:grey;
background: -webkit-linear-gradient(0deg, #ff956c, #ff3644);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align:left;
z-index:20;
}
#blank_work{
position:absolute;
width: 80px;
height: 100px;
margin-top:100px;
background:red;
-webkit-transition:all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition:all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
transition:all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.button_cadre_work:hover #blank_work{
margin-top:100px;
margin-left:80px;
}<a href="#"><div class="button_cadre_work"><div id="work_btn">WORKS</div>
<div id="blank_work"></div>
</div></a>