public
Created

  • Download Gist
gistfile1.html
Liquid
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 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Nice Buttons</title>
<style>
* { margin: 0; padding: 0; }
ul {
padding: 20px;
width: 80px;
float: left;
list-style: none;
background-image: url('http://dl.dropbox.com/u/452595/Wood-Wallpaper.png');
}
ul.alt {
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #ccc),color-stop(1, #999));
background: -moz-linear-gradient(center top,#ccc 20%,#999 100%);
}
ul.alt2 {
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #666),color-stop(1, #333));
background: -moz-linear-gradient(center top,#666 20%,#333 100%);
}
li {
margin: 0;
padding: 5px 0;
display: block;
}
 
body {
padding: 40px;
background: #eee;
color: #999;
font: 11px 'Helvetica Neue', "Arial", sans-serif;
text-align: center;
 
-webkit-user-select: none;
-moz-user-select: none;
}
 
a.button,
button,
input[type=button],
input[type=submit],
input[type=reset] {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
 
font: 11px 'Lucida Grande', 'Helvetica Neue', "Arial", sans-serif;
padding: 5px 15px 6px 15px;
margin: 0 auto;
display: inline-block;
border: none;
 
color: white;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
text-decoration: none;
 
-webkit-border-radius: 1000px;
-moz-border-radius: 1000px;
border-radius: 1000px;
 
background: #237fd7;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #52a8e8),color-stop(1, #2e76cf));
background: -moz-linear-gradient(center top,#52a8e8 20%,#2e76cf 100%);
 
-webkit-box-shadow: inset 0 1px 0 rgba(34,57,100,0.6), inset 1px 0 0 rgba(34,57,100,0.4), inset -1px 0 0 rgba(34,57,100,0.5), inset 0 -1px 0 rgba(34,57,100,0.6),inset 0 2px 0 rgba(255,255,255,.3),inset 0 0 4px rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.29);
-moz-box-shadow: inset 0 1px 0 rgba(34,57,100,0.6), inset 1px 0 0 rgba(34,57,100,0.4), inset -1px 0 0 rgba(34,57,100,0.5), inset 0 -1px 0 rgba(34,57,100,0.6),inset 0 2px 0 rgba(255,255,255,.3),inset 0 0 4px rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.29);
box-shadow: inset 0 1px 0 rgba(34,57,100,0.6), inset 1px 0 0 rgba(34,57,100,0.4), inset -1px 0 0 rgba(34,57,100,0.5), inset 0 -1px 0 rgba(34,57,100,0.6),inset 0 2px 0 rgba(255,255,255,.3),inset 0 0 4px rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.29);
}
 
button:hover,
input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover,
a:hover,
a.button.hover,
a.hover {
background: #0073d2;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #3e9ee5),color-stop(1, #1666ca));
background: -moz-linear-gradient(center top,#3e9ee5 20%,#1666ca 100%);
}
 
button:active,
input[type=button]:active,
input[type=submit]:active,
input[type=reset]:active,
a.button:active,
a.active {
padding-top: 6px;
padding-bottom: 5px;
-webkit-box-shadow:inset 0 1px 0 rgba(10,10,10,0.5), inset 1px 0 0 rgba(10,10,10,0.3), inset -1px 0 0 rgba(10,10,10,0.4), inset 0 -1px 0 rgba(10,10,10,0.5),inset 0 1px 5px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255, 0.3);
-moz-box-shadow:inset 0 1px 0 rgba(10,10,10,0.5), inset 1px 0 0 rgba(10,10,10,0.3), inset -1px 0 0 rgba(10,10,10,0.4), inset 0 -1px 0 rgba(10,10,10,0.5),inset 0 1px 5px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255, 0.3);
box-shadow:inset 0 1px 0 rgba(10,10,10,0.5), inset 1px 0 0 rgba(10,10,10,0.3), inset -1px 0 0 rgba(10,10,10,0.4), inset 0 -1px 0 rgba(10,10,10,0.5),inset 0 1px 5px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255, 0.3);
}
 
button:disabled,
input[type=button]:disabled,
input[type=submit]:disabled,
input[type=reset]:disabled,
a.button:disabled,
a.button.disabled {
cursor: default;
padding: 4px 14px 5px 14px;
border: 1px solid rgba(0,0,0,0.3);
color: rgba(0,0,0,0.5);
text-shadow: none;
background: rgba(255,255,255,0.2);
-webkit-box-shadow:inset 0 -5px 5px rgba(40,40,40,0.1);
-moz-box-shadow:inset 0 -5px 5px rgba(40,40,40,0.1);
box-shadow:inset 0 -5px 5px rgba(40,40,40,0.1);
}
button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; }
a { outline: none;}
</style>
</head>
<body>
<ul>
<li><button>&lt;button/&gt;</button></li>
<li><button disabled>&lt;button/&gt;</button></li>
<li><input type="button" value="type=button" /></li>
<li><input type="button" value="type=button" disabled /></li>
<li><input type="submit" value="type=submit" /></li>
<li><input type="submit" value="type=submit" disabled /></li>
<li><input type="reset" value="type=reset" /></li>
<li><input type="reset" value="type=reset" disabled /></li>
</ul>
<ul>
<li><a href="#" class="button">Action</a></li>
<li><a href="#" class="button hover">Action</a></li>
<li><a href="#" class="button active">Action</a></li>
<li><a href="#" class="button disabled">Action</a></li>
</ul>
<ul class="alt">
<li><a href="#" class="button">Action</a></li>
<li><a href="#" class="button hover">Action</a></li>
<li><a href="#" class="button active">Action</a></li>
<li><a href="#" class="button disabled">Action</a></li>
</ul>
<ul class="alt2">
<li><a href="#" class="button">Action</a></li>
<li><a href="#" class="button hover">Action</a></li>
<li><a href="#" class="button active">Action</a></li>
<li><a href="#" class="button disabled">Action</a></li>
</ul>
<ul class="alt">
<li><button>&lt;button/&gt;</button></li>
<li><button disabled>&lt;button/&gt;</button></li>
<li><input type="button" value="type=button" /></li>
<li><input type="button" value="type=button" disabled /></li>
<li><input type="submit" value="type=submit" /></li>
<li><input type="submit" value="type=submit" disabled /></li>
<li><input type="reset" value="type=reset" /></li>
<li><input type="reset" value="type=reset" disabled /></li>
</ul>
<ul class="alt2">
<li><button>&lt;button/&gt;</button></li>
<li><button disabled>&lt;button/&gt;</button></li>
<li><input type="button" value="type=button" /></li>
<li><input type="button" value="type=button" disabled /></li>
<li><input type="submit" value="type=submit" /></li>
<li><input type="submit" value="type=submit" disabled /></li>
<li><input type="reset" value="type=reset" /></li>
<li><input type="reset" value="type=reset" disabled /></li>
</ul>
 
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.