Skip to content

Instantly share code, notes, and snippets.

CodeMyUI CodeMyUI

Block or report user

Report or block CodeMyUI

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View index.html
<div class="cntr">
<label for="rdo-1" class="btn-radio">
<input type="radio" id="rdo-1" name="radio-grp">
<svg width="20px" height="20px" viewBox="0 0 20 20">
<circle cx="10" cy="10" r="9"></circle>
<path d="M10,7 C8.34314575,7 7,8.34314575 7,10 C7,11.6568542 8.34314575,13 10,13 C11.6568542,13 13,11.6568542 13,10 C13,8.34314575 11.6568542,7 10,7 Z" class="inner"></path>
<path d="M10,1 L10,1 L10,1 C14.9705627,1 19,5.02943725 19,10 L19,10 L19,10 C19,14.9705627 14.9705627,19 10,19 L10,19 L10,19 C5.02943725,19 1,14.9705627 1,10 L1,10 L1,10 C1,5.02943725 5.02943725,1 10,1 L10,1 Z" class="outer"></path>
</svg>
<span>Option One</span>
</label>
@CodeMyUI
CodeMyUI / index.html
Created Oct 20, 2019
Strikethrough Radios
View index.html
<p>
Please
<label><input type="radio" name="signup" value="yes" checked><span>add me</span></label>
<label><input type="radio" name="signup" value="no"><span>do not add me</span></label>
to your mailing list.
</p>
@CodeMyUI
CodeMyUI / index.html
Created Oct 20, 2019
Material Inspired Checkboxes and Radio Groups
View index.html
<form class="form">
<h2>Checkboxes</h2>
<div class="inputGroup">
<input id="option1" name="option1" type="checkbox"/>
<label for="option1">Option One</label>
</div>
<div class="inputGroup">
<input id="option2" name="option2" type="checkbox"/>
@CodeMyUI
CodeMyUI / index.html
Created Oct 20, 2019
Jelly Radio Button
View index.html
<div class="continput">
<h1>Jelly Radio btn</h1>
<h4>I hope you enjoyed it</h4>
<ul>
<li>
<input checked type="radio" name="1">
<label>OMG a radio!</label>
<div class="bullet">
<div class="line zero"></div>
<div class="line one"></div>
@CodeMyUI
CodeMyUI / index.html
Created Oct 18, 2019
Radio Buttons Interaction
View index.html
<div class="card">
<h2>Radio Buttons</h2>
<ul>
<li>
<input type="radio" name="name" id="one" checked />
<label for="one">Option #1</label>
<div class="check"></div>
</li>
@CodeMyUI
CodeMyUI / index.html
Created Oct 18, 2019
Underground radios
View index.html
<label class="showOverlay" for="check">Show mask </label>
<input id="check" class="check" type="checkbox">
<div class="containerOuter">
<div class="container">
<input type="radio" class="hidden" id="input1" name="inputs">
<label class="entry" for="input1"><div class="circle"></div><div class="entry-label">Kingdom</div></label>
<input type="radio" class="hidden" id="input2" name="inputs">
<label class="entry" for="input2"><div class="circle"></div><div class="entry-label">Horse</div></label>
<input type="radio" class="hidden" id="input3" name="inputs">
<label class="entry" for="input3"><div class="circle"></div><div class="entry-label">Computer</div></label>
@CodeMyUI
CodeMyUI / index.html
Created Oct 18, 2019
Roman Pagination
View index.html
<div class="roman-pagination">
<label class="roman-radio">
<input type="radio" name="radioName" checked>
<span class="numeral">I.</span>
<span class="title">The First</span>
</label>
<label class="roman-radio">
<input type="radio" name="radioName">
@CodeMyUI
CodeMyUI / index.html
Created Oct 18, 2019
Responsive Flexbox Pagination
View index.html
<!-- Go ahead and squeeze me! -->
<div class="wrapper">
<h1>Responsive Pagination</h1>
<p>I'm a responsive page link menu built with Flexbox!</p>
<ul class="pagination" role="menubar" aria-label="Pagination">
<li><a href=""><span>First</span></a></li>
@CodeMyUI
CodeMyUI / index.html
Created Oct 18, 2019
Pac-Man CSS Pagination
View index.html
<div class="pagination">
<input id="dot-1" type="radio" name="dots">
<label for="dot-1"></label>
<input id="dot-2" type="radio" name="dots">
<label for="dot-2"></label>
<input id="dot-3" type="radio" name="dots" checked="checked">
<label for="dot-3"></label>
<input id="dot-4" type="radio" name="dots">
<label for="dot-4"></label>
<input id="dot-5" type="radio" name="dots">
@CodeMyUI
CodeMyUI / index.html
Created Oct 14, 2019
Responsive SVG Black Friday Badge
View index.html
<a href="#" class="badge">
<svg viewBox="0 0 210 210">
<g stroke="none" fill="none">
<path d="M22,104.5 C22,58.9365081 58.9365081,22 104.5,22 C150.063492,22 187,58.9365081 187,104.5" id="top"></path>
<path d="M22,104.5 C22,150.063492 58.9365081,187 104.5,187 C150.063492,187 187,150.063492 187,104.5" id="bottom"></path>
</g>
<circle cx="105" cy="105" r="62" stroke="currentColor" stroke-width="1" fill="none" />
<text width="200" font-size="20" fill="currentColor">
<textPath startOffset="50%" text-anchor="middle" alignment-baseline="middle" xlink:href="#top">
Special offers
You can’t perform that action at this time.