CodeMyUI

GRRWWze

A Pen by botch on CodePen.

License.

CodeMyUI

<table class="zigzag">
  <thead>
    <tr>
      <th>Player</th>
      <th>Goals</th>
      <th>First</th>
      <th>Latest</th>
    </tr>
  </thead>
  <tbody>

CodeMyUI

<table class="zigzag">
  <thead>
    <tr>
      <th>Player</th>
      <th>Goals</th>
      <th>First</th>
      <th>Latest</th>
    </tr>
  </thead>
  <tbody>

CodeMyUI

<table class="zigzag">
  <thead>
    <tr>
      <th>Player</th>
      <th>Goals</th>
      <th>First</th>
      <th>Latest</th>
    </tr>
  </thead>
  <tbody>

CodeMyUI

<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

<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

<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

<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

<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

<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>