-
Notifications
You must be signed in to change notification settings - Fork 0
/
cb.html
executable file
·125 lines (125 loc) · 7.88 KB
/
cb.html
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
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Checkboxes and Radio Buttons with SVG</title>
<meta name="description" content="Animated Checkboxes and Radio Buttons with SVG: Using SVG for adding some fancy 'check' animations to form inputs" />
<meta name="keywords" content="animated checkbox, svg, radio button, styled checkbox, css, pseudo element, form, animated svg" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<!-- Top Navigation -->
<div class="codrops-top clearfix">
<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/SectionSeparators/"><span>Previous Demo</span></a>
<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=16637"><span>Back to the Codrops Article</span></a></span>
</div>
<header>
<h1>Animated Checkboxes and Radio Buttons with SVG<span> Proof-of-concept for adding some fancy "check" animations to form inputs</span></h1>
<p>Please note that the animated SVG might not work in all (mobile) browsers.</p>
</header>
<section>
<form class="ac-custom ac-checkbox ac-cross" autocomplete="off">
<h2>How do you collaboratively administrate empowered markets via plug-and-play networks?</h2>
<ul>
<li><input id="cb1" name="cb1" type="checkbox"><label for="cb1">Efficiently unleash information</label></li>
<li><input id="cb2" name="cb2" type="checkbox"><label for="cb2">Quickly maximize timely deliverables</label></li>
<li><input id="cb3" name="cb3" type="checkbox"><label for="cb3">Dramatically maintain solutions</label></li>
<li><input id="cb4" name="cb4" type="checkbox"><label for="cb4">Completely synergize relationships</label></li>
<li><input id="cb5" name="cb5" type="checkbox"><label for="cb5">Professionally cultivate customer service</label></li>
</ul>
</form>
</section>
<section>
<form class="ac-custom ac-radio ac-fill" autocomplete="off">
<h2>Where do you proactively envision multimedia based expertise and cross-media growth strategies?</h2>
<ul>
<li><input id="r1" name="r1" type="radio"><label for="r1">Seamlessly visualize quality intellectual capital</label></li>
<li><input id="r2" name="r1" type="radio"><label for="r2">Collaboratively administrate turnkey channels</label></li>
<li><input id="r3" name="r1" type="radio"><label for="r3">Objectively seize scalable metrics</label></li>
<li><input id="r4" name="r1" type="radio"><label for="r4">Energistically scale future-proof core competencies</label></li>
</ul>
</form>
</section>
<section>
<form class="ac-custom ac-checkbox ac-checkmark" autocomplete="off">
<h2>Why do you interactively procrastinate high-payoff content without backward-compatible data?</h2>
<ul>
<li><input id="cb6" name="cb6" type="checkbox"><label for="cb6">Credibly reintermediate backend ideas</label></li>
<li><input id="cb7" name="cb7" type="checkbox"><label for="cb7">Continually reintermediate integrated processes</label></li>
<li><input id="cb8" name="cb8" type="checkbox"><label for="cb8">Distinctively exploit optimal alignments</label></li>
<li><input id="cb9" name="cb9" type="checkbox"><label for="cb9">Quickly coordinate e-business applications</label></li>
<ul>
</form>
</section>
<section>
<form class="ac-custom ac-radio ac-circle" autocomplete="off">
<h2>How would you dynamically target high-payoff intellectual capital for customized technologies?</h2>
<ul>
<li><input id="r5" name="r2" type="radio"><label for="r5">Objectively integrate emerging core competencies</label></li>
<li><input id="r6" name="r2" type="radio"><label for="r6">Progressively maintain extensive infomediaries</label></li>
<li><input id="r7" name="r2" type="radio"><label for="r7">Proactively fabricate one-to-one materials</label></li>
<li><input id="r8" name="r2" type="radio"><label for="r8">Quickly aggregate B2B users</label></li>
</ul>
</form>
</section>
<section>
<form class="ac-custom ac-checkbox ac-boxfill" autocomplete="off">
<h2>How can you appropriately empower dynamic leadership skills after business portals?</h2>
<ul>
<li><input id="cb10" name="cb10" type="checkbox"><label for="cb10">Professionally fashion wireless leadership</label></li>
<li><input id="cb11" name="cb11" type="checkbox"><label for="cb11">Dynamically reinvent market-driven opportunities</label></li>
<li><input id="cb12" name="cb12" type="checkbox"><label for="cb12">Compellingly embrace empowered e-business</label></li>
<li><input id="cb13" name="cb13" type="checkbox"><label for="cb13">Synergistically deliver performance based methods</label></li>
</ul>
</form>
</section>
<section>
<form class="ac-custom ac-radio ac-swirl" autocomplete="off">
<h2>How do you interactively productize premium technologies whereas interdependent quality vectors?</h2>
<ul>
<li><input id="r9" name="r3" type="radio"><label for="r9">Uniquely matrix economically sound value</label></li>
<li><input id="r10" name="r3" type="radio"><label for="r10">Competently parallel task fully researched data</label></li>
<li><input id="r11" name="r3" type="radio"><label for="r11">Collaboratively expedite quality manufactured products</label></li>
<li><input id="r12" name="r3" type="radio"><label for="r12">Quickly communicate enabled technology and leadership skills</label></li>
</ul>
</form>
</section>
<section>
<form class="ac-custom ac-checkbox ac-diagonal" autocomplete="off">
<h2>Do you rapaciously seize adaptive infomediaries and user-centric intellectual capital and how?</h2>
<ul>
<li><input id="cb14" name="cb14" type="checkbox"><label for="cb14">Collaboratively unleash market-driven "outside the box" thinking</label></li>
<li><input id="cb15" name="cb15" type="checkbox"><label for="cb15">Enthusiastically engage process improvements</label></li>
<li><input id="cb16" name="cb16" type="checkbox"><label for="cb16">Efficiently myocardinate market-driven innovation</label></li>
<li><input id="cb17" name="cb17" type="checkbox"><label for="cb17">Phosfluorescently expedite impactful supply chains</label></li>
</ul>
</form>
</section>
<section>
<form class="ac-custom ac-list" autocomplete="off">
<h2>Your to do list to uniquely deploy cross-unit benefits with wireless testing procedures:</h2>
<ol>
<li><input id="cb18" name="cb18" type="checkbox"><label for="cb18"><span>Quickly incentivize impactful actions</span></label></li>
<li><input id="cb19" name="cb19" type="checkbox"><label for="cb19"><span>Monotonically engage market-driven capital</span></label></li>
<li><input id="cb20" name="cb20" type="checkbox"><label for="cb20"><span>Globally harness multimedia collaboration</span></label></li>
<li><input id="cb21" name="cb21" type="checkbox"><label for="cb21"><span>Professionally cultivate customer service</span></label></li>
<ol>
</form>
</section>
<section class="related">
<p>If you enjoyed these effects you might also like:</p>
<p><a href="http://tympanus.net/Tutorials/AnimatedBorderMenus/">Animated Border Menus</a></p>
<p><a href="http://tympanus.net/Development/CreativeButtons/">Creative Button Styles</a></p>
</section>
</div><!-- /container -->
<script src="js/svgcheckbx.js"></script>
</body>
</html>