Title

HTML CSS Open on hover button

description

Published 2022-11-07

Modified 2022-11-07

content

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();
		});
	}
}); 
				
			

Sources & References