Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
98 lines (77 sloc) 2.73 KB
<!doctype html>
<html>
<head>
<title>CSS3 patterned buttons</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<style>
body {
margin: 0 auto 100px;
text-align: center;
font-family: 'Lucida sans', Arial, Helvetica;
color: #444;
}
h1 {
background: #eee;
border-top: 2px dashed #fff;
border-bottom: 1px solid #ddd;
margin-top: 0; padding: 10px 0;
text-shadow: 0 -1px 0 #fff;
}
</style>
</head>
<body>
<h1>CSS3 patterned buttons</h1>
<br><br>
<button class="small button">Button</button>
<button class="small color red button">Button</button>
<button class="small color green button">Button</button>
<button class="small color blue button">Button</button>
<br><br>
<button class="small button" disabled>Button</button>
<button class="small color red button" disabled>Button</button>
<button class="small color green button" disabled>Button</button>
<button class="small color blue button" disabled>Button</button>
<br><br>
<ul class="button-group">
<li><button class="small button">Button</button></li>
<li><button class="small button">Button</button></li>
<li><button class="small button">Button</button></li>
<li><button class="small button">Button</button></li>
</ul>
<br><br><br><br>
<button class="button">Button</button>
<button class="color red button">Button</button>
<button class="color green button">Button</button>
<button class="color blue button">Button</button>
<br><br>
<button class="button" disabled>Button</button>
<button class="color red button" disabled>Button</button>
<button class="color green button" disabled>Button</button>
<button class="color blue button" disabled>Button</button>
<br><br>
<ul class="button-group">
<li><button class="button">Button</button></li>
<li><button class="button">Button</button></li>
<li><button class="button">Button</button></li>
<li><button class="button">Button</button></li>
</ul>
<br><br><br><br>
<button class="large button">Button</button>
<button class="large color red button">Button</button>
<button class="large color green button">Button</button>
<button class="large color blue button">Button</button>
<br><br>
<button class="large button" disabled>Button</button>
<button class="large color red button" disabled>Button</button>
<button class="large color green button" disabled>Button</button>
<button class="large color blue button" disabled>Button</button>
<br><br>
<ul class="button-group">
<li><button class="large button">Button</button></li>
<li><button class="large button">Button</button></li>
<li><button class="large button">Button</button></li>
<li><button class="large button">Button</button></li>
</ul>
</body>
</html>