Useful Stuff About:

Button Hover and Click

This is an example of how you can use javascript to animate buttons to hover and remain on the hover state if you click on the button and at the same time animation any previously clicked button back to the normail (non-hovered) state.

Hover and click on these buttons

Button 0

Button 1

Button 2

Button 3

Button 4

Scripts needed (copy and paste inside <head>)

Assuming you don't already have these in the head of your page, copy and paste the following into the head of your html page


<script src="https://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script src="https://www.freestyleacademy.rocks/jquery/easing.js"></script>
<script src="https://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script>
<script src="https://www.freestyleacademy.rocks/jquery/transit.js"></script>

Here's the HTML Code


  <div class="btn" id="btn0">Button 0</div>
  <div class="btn" id="btn1">Button 1</div>
  <div class="btn" id="btn2">Button 2</div>
  <div class="btn" id="btn3">Button 3</div>
  <div class="btn" id="btn4">Button 4</div>

Here's the CSS Code - this needs to be adjusted a lot for what YOU want


.btn {
	width: 125px;
	height: 17px;
	padding: 5px;
	border-radius: 20px;
	text-align: center;
	font-size: 1em;
	cursor: pointer;
	float: left;
	margin-right: 20px;
	position: relative;
	background-color: rgba(47,95,254,1.00);
	color: rgba(255,255,255,1.00);
	border: 2px solid rgba(0,0,0,1.00);
	z-index:1001;
}

Here's the javascript


	var btnClicked;
	var btnHovered, currentBtnID, btnHoverTime=500, btnEasing="linear", normalBtnStyleBGColor, normalBtnStyleColor, normalBtnStyleBorder, hoverBtnStyleBGColor, hoverBtnStyleColor, hoverBtnStyleBorder ;
	currentBtnID="#btn0";//IMPORTANT!!!
	//
	//Example default styles
	normalBtnStyleBGColor="rgba(47,95,254,1.00)";
	normalBtnStyleColor="rgba(255,255,255,1.00)";
	normalBtnStyleBorder="2px solid rgba(0,0,0,1.00)";
	hoverBtnStyleBGColor="rgba(67,180,73,1.00)";
	hoverBtnStyleColor="rgba(0,0,0,1.00)";
	hoverBtnStyleBorder="2px solid rgba(255,0,0,1.00)";
	//
	//This block sets the default button to the hover state
	$(currentBtnID).css({
		"background-color": hoverBtnStyleBGColor,
		"color": hoverBtnStyleColor,
		"border":hoverBtnStyleBorder,
		"cursor": "default"
	});
	//
	//actions when buttons are hovered
   	$(".btn").hover(function () { //actions to occur when you hover ON
		btnHovered="#"+$(this).attr("ID");//IMPORTANT!!!
		//
		//what do you want to happen when you hover ON a button
		//Example below
		if (btnHovered!=currentBtnID){
			$(this).stop().transition({//actions apply to only the button you have hover on bc the word "this"
				"background-color": hoverBtnStyleBGColor,
				"color": hoverBtnStyleColor,
				"border":hoverBtnStyleBorder
			},btnHoverTime,btnEasing);
		}
	}, function () { //actions to occur when you hover OFF
		if (btnHovered!=currentBtnID){//if the button hovered is the also the button clicked
			//what do you want to happen when you hover OFF a button
			//Example below
			$(this).stop().transition({
				"background-color": normalBtnStyleBGColor,
				"color": normalBtnStyleColor,
				"border": normalBtnStyleBorder
			},btnHoverTime,btnEasing);
		}
	});
	$(".btn").click(function () {
		if (btnHovered!=currentBtnID){//if the button hovered on is NOT the same as the currently clicked button
			$(currentBtnID).transition({
				"background-color": normalBtnStyleBGColor,
				"color": normalBtnStyleColor,
				"border": normalBtnStyleBorder
			},btnHoverTime,btnEasing);
			currentBtnID="#"+$(this).attr("ID");//Stores new value for currently clicked button ID
			$(".btn").css({//Resets all buttons to have default hand pointer
				"cursor": "pointer"
			});
			$(currentBtnID).css({//Changes current button NOT have default hand pointer
				"cursor": "default"
			});
			btnClicked=$(this).attr("ID");//Stores new value for currently clicked button ID for use in other functions
			//actions for clicked button
		}
	});