jakewendt.github.com/button.html at master · jakewendt/jakewendt.github.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<html>
<head>
<style>

/*	Make links, buttons and submit buttons look the same. */

a:link,
a:visited,
a:hover,
a:active,
a, button, input[type="submit"] {
	font-size: 20pt;
	font-weight: bold;
	margin: 10px;
	padding: 10px;

	cursor: pointer;
	border: 1px solid black;
	text-decoration: none;
	font-family: Verdana,Arial,Helvetica,sans-serif;


	/* http://css-radius.heroku.com */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

/*	box-sizing: border-box; Not sure what this would do. */

	display: inline-block;
	text-align: center;
	white-space: pre;

	color: black;
	background-color: #DDDDDD;

/*
	background or background-image ???
*/
/* for webkit browsers */
	background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#CCCCCC));
/* for firefox 3.6+  */
	background: -moz-linear-gradient(top,  #EEEEEE,  #CCCCCC);
/* for ie , but doesn't seem to work as expected despite other examples working */
	filter: progid:DXImageTransform.Microsoft.gradient(StartColorStr='#EEEEEE', EndColorStr='#CCCCCC');
}

</style>
</head>
<body>
<form>
<div>
<a href='http://cnn.com'>This is CNN</a>
</div>

<div>
<button>This is CNN</button>
</div>

<div>
<input type="submit" value="This is CNN"/>
</div>
</form>
</body>
</html>