alexmattorr · August 29, 2015 13:56
diff --git a/button b/button
 <!doctype html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>How to create an animated css & javascript button!</title>
 </head>

 <style>
 /*active affect gets rid of the box shadow and moves down 5px, this gives the impression (animation) of actually pushing a button.*/
 #button:active {
 	box-shadow:none;
 	top:5px;
 }

 /*hover affect*/
 #button:hover {
 	background-color:#3E606F;
 }

 #button {
 	width:130px;
 	height:65px;
 	margin-top:30px;
 	color:#193441;
 	font-size:40px;
 	font-weight:bold;
 	margin-left:auto;
 	margin-right:auto;
 	padding-top:15px;
 	background-color:#D1DBBD;
 	border-radius:15px;
 		/* box shadow to give the affect of a 3D button */
 	-webkit-box-shadow:2px 4px #91aa9d;
 	-webkit-box-shadow:2px 4px #91aa9d;
 	box-shadow: 2px 4px #91aa9d;
 	
 	text-align:center;
 	position:relative;
 	vertical-align:middle;
 		/*transition slows motion of #button:active*/
 	-webkit-transition:all 0.2s ease 0s;
 	-moz-transition:all 0.2s ease 0s;
 	transition:all 0.2s ease 0s;	
 }

 </style>

 <body>
 	//<a onclick="openForm(); sends the user using a JavaScript function to designated page
 		//make sure <a onclick="openForm();"></a> surrounds the div (this is so your user pushes the entire div, not just the text
 <a onclick="openForm();"><div id="button"><strong>PUSH</strong></div></a>

 <script type="text/javascript">
 function openForm() {
 	//fill in form information and replace '#' with location URL
 	myForm = open('#', 'Form2','height=1000 width=900');
 	myForm = moveTo(400,50);
 }
 </script>

 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>How to create an animated css & javascript button!</title>
	</head>

	<style>
	/active affect gets rid of the box shadow and moves down 5px, this gives the impression (animation) of actually pushing a button./
	#button:active {
	box-shadow:none;
	top:5px;
	}

	/hover affect/
	#button:hover {
	background-color:#3E606F;
	}

	#button {
	width:130px;
	height:65px;
	margin-top:30px;
	color:#193441;
	font-size:40px;
	font-weight:bold;
	margin-left:auto;
	margin-right:auto;
	padding-top:15px;
	background-color:#D1DBBD;
	border-radius:15px;
	/* box shadow to give the affect of a 3D button */
	-webkit-box-shadow:2px 4px #91aa9d;
	-webkit-box-shadow:2px 4px #91aa9d;
	box-shadow: 2px 4px #91aa9d;

	text-align:center;
	position:relative;
	vertical-align:middle;
	/transition slows motion of #button:active/
	-webkit-transition:all 0.2s ease 0s;
	-moz-transition:all 0.2s ease 0s;
	transition:all 0.2s ease 0s;
	}

	</style>

	<body>
	//<a onclick="openForm(); sends the user using a JavaScript function to designated page
	//make sure <a onclick="openForm();"></a> surrounds the div (this is so your user pushes the entire div, not just the text
	<a onclick="openForm();"><div id="button"><strong>PUSH</strong></div></a>

	<script type="text/javascript">
	function openForm() {
	//fill in form information and replace '#' with location URL
	myForm = open('#', 'Form2','height=1000 width=900');
	myForm = moveTo(400,50);
	}
	</script>

	</body>
	</html>