but there's a demo that uses JS and CSS. I have been trying to fix it for about 3-4 hours.
(FYI after 2 hours struggling I have found half of solution. I'm using Safari and should but -webkit-transform) Now I have tried the css added directly to the element and it worked, but it doesn't worked using JS.
I have download jquery-1.11.3.js and import it.
The lesson that I'm watching (ON 3:45:55)
And when I click nothing happened. WHY!?
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;
}
Instead of using JQuery you can do it with CSS using
:activeDocs:
http://www.w3schools.com/cssref/sel_active.asp