HTML CSS Open on hover button
Set HTML widget to dislay inline or fixed width and add ID “expandbutton”
<div class="expand-flex-button">
<div class="button-link" style="display:none;">
<a href="https://www.ronaldpostma.com">Do Something?</a>
</div>
<div class="button-icon">
<i aria-hidden="true" class="fas fa-chevron-left"></i>
</div>
</div>
#expandbutton .expand-flex-button {display: flex;background-color:#D55059;border-radius:6px 0px 0px 6px;padding:6px 0px;}
#expandbutton .expand-flex-button * {display:inline-block;color:white;font-weight:600;font-size:16px;}
#expandbutton .button-icon {padding:0px 12px;transition:transform 400ms;}
#expandbutton .button-link {padding-left:12px;}
#expandbutton.opened .button-icon {transform:rotate(-180deg);}
jQuery(function($){
// AANMELDEN KNOP
if ($(window).width() <= 1024) {
$('#expandbutton .button-icon').click(function(){
$('#expandbutton').toggleClass('opened');
$('#expandbutton .button-link').fadeToggle();
});
$('main').click(function(){
$('#expandbutton.opened').removeClass('opened');
$('#expandbutton .button-link:visible').fadeOut();
});
}
if ($(window).width() > 1024) {
$('#expandbutton').hover(function(){
$(this).toggleClass('opened');
$('#expandbutton .button-link').fadeToggle();
});
}
});