After spending around 3-4 hours trying to fix a demo using JS and CSS, I finally found half of the solution. Despite adding the CSS directly to the element which worked fine, I encountered issues when attempting to use JS.
I downloaded the jquery-1.11.3.js file and imported it as well.
The lesson I was following can be found here (ON 3:45:55).
However, upon clicking, nothing seemed to happen. Frustrating!
Login.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<link rel='stylesheet' type="text/css" href='LoginCSS.css' />
</head>
<body>
<div id="banner">Please Login!</div>
<form>
<div>
<label for="name">Name:</label>
<input type="text" name="name" />
</div>
<div>
<label for="email">Email:</label>
<input type="text" name="email" />
</div>
<div id="demoButton" class="default">
Submit!
</div>
</form>
<script src="jquery-1.11.3.js"></script>
<script>
$(function () {
$('#demoButton').mousedown(function () {
$(this).removeClass('default');
$(this).addClass('shrink');
});
$('#demoButton').mouseup(function () {
$(this).removeClass('shrink');
$(this).addClass('default');
});
});
</script>
</body>
LoginCSS.css
html {
font-size: 16px;
font-family: Verdana;
}
label {
float: left;
width: 75px;
}
div {
margin-bottom: .4em;
}
#banner {
background-color: lightblue;
color: white;
width: 100%;
font-size : 4em;
text-align: center;
}
#demoButton {
font-weight: bold;
color: white;
background-color: blue;
height: 1.25em;
width: 6em;
text-align: center;
padding-top: .3em;
-webkit-user-select: none;
cursor: crosshair;
}
#demoButton::selection {
color: black;
background-color: yellow;
}
.shrink{
transform: scale(0.2, 0.2);
-webkit-transform: scale(0.2, 0.2);
}
.default {
transform: none;
-webkit-transform: none;
}