<link href="lib/oa.material.min.css" rel="stylesheet" type="text/css" />
<button class="oa-btn">Pure</button>
<button class="oa-btn red">Red</button>
<button class="oa-btn orange">Orange</button>
<button class="oa-btn yellow">Yellow</button>
<button class="oa-btn green">Green</button>
<button class="oa-btn blue">Blue</button>
<button class="oa-btn cyan">Cyan</button>
<button class="oa-btn purple">Purple</button>
<link href="lib/oa.material.min.css" rel="stylesheet" type="text/css" />
<button class="oa-btn jelly">Pure</button>
<button class="oa-btn jelly red">Red</button>
<button class="oa-btn jelly orange">Orange</button>
<button class="oa-btn jelly yellow">Yellow</button>
<button class="oa-btn jelly green">Green</button>
<button class="oa-btn jelly blue">Blue</button>
<button class="oa-btn jelly cyan">Cyan</button>
<button class="oa-btn jelly purple">Purple</button>
$('button.jelly').click (function () {
var events = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd';
$(this).addClass ('jelly-effect')
.bind (events, function () {
$(this).removeClass ('jelly-effect');
});
});
<link href="lib/oa.material.min.css" rel="stylesheet" type="text/css" />
<button disabled class="oa-btn">Pure</button>
<button disabled class="oa-btn red">Red</button>
<button disabled class="oa-btn orange">Orange</button>
<button disabled class="oa-btn yellow">Yellow</button>
<button disabled class="oa-btn green">Green</button>
<button disabled class="oa-btn blue">Blue</button>
<button disabled class="oa-btn cyan">Cyan</button>
<button disabled class="oa-btn purple">Purple</button>
<link href="lib/oa.material.min.css" rel="stylesheet" type="text/css" />
<div class="oa-rdo">
<input type="radio" id="radio1" name="radio">
<span></span>
<label for="radio1">Item 1</label>
</div>
<div class="oa-rdo red">
<input type="radio" id="radio2" name="radio">
<span></span>
<label for="radio2">Item 2</label>
</div>
<div class="oa-rdo orange">
<input type="radio" id="radio3" name="radio">
<span></span>
<label for="radio3">Item 3</label>
</div>
<div class="oa-rdo yellow">
<input type="radio" id="radio4" name="radio">
<span></span>
<label for="radio4">Item 4</label>
</div>
<div class="oa-rdo green">
<input type="radio" id="radio5" name="radio">
<span></span>
<label for="radio5">Item 5</label>
</div>
<div class="oa-rdo blue">
<input type="radio" id="radio6" name="radio">
<span></span>
<label for="radio6">Item 6</label>
</div>
<div class="oa-rdo cyan">
<input type="radio" id="radio7" name="radio">
<span></span>
<label for="radio7">Item 7</label>
</div>
<div class="oa-rdo purple">
<input type="radio" id="radio8" name="radio">
<span></span>
<label for="radio8">Item 8</label>
</div>
<link href="lib/oa.material.min.css" rel="stylesheet" type="text/css" />
<div class="oa-rdo">
<input type="radio" disabled id="radio1" name="radio">
<span></span>
<label for="radio1">Item 1</label>
</div>
<div class="oa-rdo red">
<input type="radio" disabled id="radio2" name="radio">
<span></span>
<label for="radio2">Item 2</label>
</div>
<div class="oa-rdo orange">
<input type="radio" disabled id="radio3" name="radio">
<span></span>
<label for="radio3">Item 3</label>
</div>
<div class="oa-rdo yellow">
<input type="radio" disabled id="radio4" name="radio">
<span></span>
<label for="radio4">Item 4</label>
</div>
<div class="oa-rdo green">
<input type="radio" disabled id="radio5" name="radio">
<span></span>
<label for="radio5">Item 5</label>
</div>
<div class="oa-rdo blue">
<input type="radio" disabled id="radio6" name="radio">
<span></span>
<label for="radio6">Item 6</label>
</div>
<div class="oa-rdo cyan">
<input type="radio" disabled id="radio7" name="radio">
<span></span>
<label for="radio7">Item 7</label>
</div>
<div class="oa-rdo purple">
<input type="radio" disabled id="radio8" name="radio">
<span></span>
<label for="radio8">Item 8</label>
</div>
<link href="lib/oa.material.min.css" rel="stylesheet" type="text/css" />
<div class="oa-ckb">
<input type="checkbox" id="checkbox1">
<span></span>
<label for="checkbox1">Item 1</label>
</div>
<div class="oa-ckb red">
<input type="checkbox" id="checkbox2">
<span></span>
<label for="checkbox2">Item 2</label>
</div>
<div class="oa-ckb orange">
<input type="checkbox" id="checkbox3">
<span></span>
<label for="checkbox3">Item 3</label>
</div>
<div class="oa-ckb yellow">
<input type="checkbox" id="checkbox4">
<span></span>
<label for="checkbox4">Item 4</label>
</div>
<div class="oa-ckb green">
<input type="checkbox" id="checkbox5">
<span></span>
<label for="checkbox5">Item 5</label>
</div>
<div class="oa-ckb blue">
<input type="checkbox" id="checkbox6">
<span></span>
<label for="checkbox6">Item 6</label>
</div>
<div class="oa-ckb cyan">
<input type="checkbox" id="checkbox7">
<span></span>
<label for="checkbox7">Item 7</label>
</div>
<div class="oa-ckb purple">
<input type="checkbox" id="checkbox8">
<span></span>
<label for="checkbox8">Item 8</label>
</div>
<link href="lib/oa.material.min.css" rel="stylesheet" type="text/css" />
<div class="oa-ckb">
<input type="checkbox" disabled id="checkbox1">
<span></span>
<label for="checkbox1">Item 1</label>
</div>
<div class="oa-ckb red">
<input type="checkbox" disabled id="checkbox2">
<span></span>
<label for="checkbox2">Item 2</label>
</div>
<div class="oa-ckb orange">
<input type="checkbox" disabled id="checkbox3">
<span></span>
<label for="checkbox3">Item 3</label>
</div>
<div class="oa-ckb yellow">
<input type="checkbox" disabled id="checkbox4">
<span></span>
<label for="checkbox4">Item 4</label>
</div>
<div class="oa-ckb green">
<input type="checkbox" disabled id="checkbox5">
<span></span>
<label for="checkbox5">Item 5</label>
</div>
<div class="oa-ckb blue">
<input type="checkbox" disabled id="checkbox6">
<span></span>
<label for="checkbox6">Item 6</label>
</div>
<div class="oa-ckb cyan">
<input type="checkbox" disabled id="checkbox7">
<span></span>
<label for="checkbox7">Item 7</label>
</div>
<div class="oa-ckb purple">
<input type="checkbox" disabled id="checkbox8">
<span></span>
<label for="checkbox8">Item 8</label>
</div>
<link href="lib/oa.material.min.css" rel="stylesheet" type="text/css" />
<div class="oa-swh">
<input type="checkbox" id="switch1">
<span></span>
<label for="switch1">Item 1</label>
</div>
<div class="oa-swh red">
<input type="checkbox" id="switch2">
<span></span>
<label for="switch2">Item 2</label>
</div>
<div class="oa-swh orange">
<input type="checkbox" id="switch3">
<span></span>
<label for="switch3">Item 3</label>
</div>
<div class="oa-swh yellow">
<input type="checkbox" id="switch4">
<span></span>
<label for="switch4">Item 4</label>
</div>
<div class="oa-swh green">
<input type="checkbox" id="switch5">
<span></span>
<label for="switch5">Item 5</label>
</div>
<div class="oa-swh blue">
<input type="checkbox" id="switch6">
<span></span>
<label for="switch6">Item 6</label>
</div>
<div class="oa-swh cyan">
<input type="checkbox" id="switch7">
<span></span>
<label for="switch7">Item 7</label>
</div>
<div class="oa-swh purple">
<input type="checkbox" id="switch8">
<span></span>
<label for="switch8">Item 8</label>
</div>
<link href="lib/oa.material.min.css" rel="stylesheet" type="text/css" />
<div class="oa-swh">
<input type="checkbox" id="switch1">
<span></span>
<label for="switch1">Item 1</label>
</div>
<div class="oa-swh red">
<input type="checkbox" id="switch2">
<span></span>
<label for="switch2">Item 2</label>
</div>
<div class="oa-swh orange">
<input type="checkbox" id="switch3">
<span></span>
<label for="switch3">Item 3</label>
</div>
<div class="oa-swh yellow">
<input type="checkbox" id="switch4">
<span></span>
<label for="switch4">Item 4</label>
</div>
<div class="oa-swh green">
<input type="checkbox" id="switch5">
<span></span>
<label for="switch5">Item 5</label>
</div>
<div class="oa-swh blue">
<input type="checkbox" id="switch6">
<span></span>
<label for="switch6">Item 6</label>
</div>
<div class="oa-swh cyan">
<input type="checkbox" id="switch7">
<span></span>
<label for="switch7">Item 7</label>
</div>
<div class="oa-swh purple">
<input type="checkbox" id="switch8">
<span></span>
<label for="switch8">Item 8</label>
</div>
<link href="lib/oa.material.min.css" rel="stylesheet" type="text/css" />
<div class="oa-swh">
<input type="checkbox" disabled id="switch1">
<span></span>
<label for="switch1">Item 1</label>
</div>
<div class="oa-swh red">
<input type="checkbox" disabled id="switch2">
<span></span>
<label for="switch2">Item 2</label>
</div>
<div class="oa-swh orange">
<input type="checkbox" disabled id="switch3">
<span></span>
<label for="switch3">Item 3</label>
</div>
<div class="oa-swh yellow">
<input type="checkbox" disabled id="switch4">
<span></span>
<label for="switch4">Item 4</label>
</div>
<div class="oa-swh green">
<input type="checkbox" disabled id="switch5">
<span></span>
<label for="switch5">Item 5</label>
</div>
<div class="oa-swh blue">
<input type="checkbox" disabled id="switch6">
<span></span>
<label for="switch6">Item 6</label>
</div>
<div class="oa-swh cyan">
<input type="checkbox" disabled id="switch7">
<span></span>
<label for="switch7">Item 7</label>
</div>
<div class="oa-swh purple">
<input type="checkbox" disabled id="switch8">
<span></span>
<label for="switch8">Item 8</label>
</div>
<link href="lib/oa.material.min.css" rel="stylesheet" type="text/css" />
<div class='oa-paper'>pure</div>
<div class='oa-paper shadow'>shadow</div>
<div class='oa-paper corner'>corner</div>
<div class='oa-paper convex'>convex</div>
<div class='oa-paper horizontal-convex'>horizontal-convex</div>
<div class='oa-paper vertical-convex'>vertical-convex</div>