marble
Version:
WeDeploy's style guide and UI components
60 lines (51 loc) • 2.13 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo: Buttons</title>
<link rel="stylesheet" href="../build/marble.css">
<style>
.btn {
margin: 5px;
}
</style>
</head>
<body>
<h1>Types</h1>
<a class="btn btn-accent" href="#">Accent</a>
<a class="btn btn-default" href="#">Default</a>
<a class="btn btn-primary" href="#">Primary</a>
<a class="btn btn-success" href="#">Success</button>
<a class="btn btn-danger" href="#">Danger</button>
<a class="btn btn-link" href="#">Link</a>
<h1>Disabled</h1>
<a class="btn btn-accent" disabled href="#">Accent</a>
<a class="btn btn-default" disabled href="#">Default</a>
<a class="btn btn-primary" disabled href="#">Primary</a>
<a class="btn btn-success" disabled href="#">Success</button>
<a class="btn btn-danger" disabled href="#">Danger</button>
<a class="btn btn-link" disabled href="#">Link</a>
<h1>Sizes</h1>
<a class="btn btn-primary btn-sm" href="#">Small</a>
<a class="btn btn-primary" href="#">Regular</a>
<a class="btn btn-primary btn-lg" href="#">Large</a>
<h1>Tags</h1>
<a class="btn btn-primary" href="#">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
<h1>Icons</h1>
<a class="btn btn-accent" href="#"><span class="icon-16-star"></span> Accent</a>
<a class="btn btn-default" href="#"><span class="icon-16-star"></span> Default</a>
<a class="btn btn-primary" href="#"><span class="icon-16-star"></span> Primary</a>
<a class="btn btn-success" href="#"><span class="icon-16-star"></span> Success</button>
<a class="btn btn-danger" href="#"><span class="icon-16-star"></span> Danger</button>
<a class="btn btn-link" href="#"><span class="icon-16-star"></span> Link</a>
<h1>Transparent</h1>
<button class="btn-transparent icon-12-arrow-down-short"></button>
<button class="btn-transparent icon-16-ellipsis"></button>
<h1>Icon</h1>
<button class="btn-icon icon-16-ellipsis"></button>
</body>
</html>