Buttons

A.mphibio.us treats buttons as they are meant to be treated, giving them the right amount of weight and a powerful hover effect to make them irresistibly clickable. Calls to action have never been more apparent. Did I mention easy to use, just add a button or submit or even add the class button to a link

<a class="button modal_opener" amp-target="amp_overlay">Click Me For Action</a>

Forms

Web developers I often fear the form itself. They are usually a pain in the neck to code. But with A.mphibio.us’ versatile naming convention basic sytatic structure and time-saving style attributes, forms are a cinch to program and implement.

Standard Fields

<form>
	<fieldset>
		<label class="above" for="regularInput">Regular Input</label>
		<input type="text" id="regularInput" placeholder="Sample Placeholder Text" />
	</fieldset>

	<fieldset>
		<label class="above" for="regularInputError">Regular Input with error class</label>
		<input type="text" id="regularInputError" class="error" placeholder="Sample of an error field" />
	</fieldset>

	<fieldset>
		<label class="above" for="regularTextarea">Regular Textarea</label>
		<textarea id="regularTextarea"></textarea>
	</fieldset>

	<fieldset class="radio">
		<label for="notifications">Notifications</label>
		<ul>
			<li><label><input type="radio" name="notifications" /> Send me email</label></li>
			<li><label><input type="radio" name="notifications" /> Don't send me email</label></li>
			<li><label><input type="radio" name="notifications" /> Send me flowers</label></li>
		</ul>
	</fieldset>

	<button type="submit">Submit Form</button>
</form>

<form class="multi beside">
  <fieldset>
    <label for="name">Name</label>
    <input type="text" id="name" class="form-text" />
    <p class="form-help">This is help text under the form field.</p>
  </fieldset>

  <fieldset>
    <label for="email">Email</label>
    <input type="email" id="email" class="form-text" />
  </fieldset>

  <fieldset>
    <label for="gender">Gender</label>
    <div class="styled_select">
    <select id="gender">
      <option>Male</option>
      <option>Female</option>
      <option>Cylon</option>
    </select>
    </div>
  </fieldset>

  <fieldset class="radio">
    <label for="notifications">Notifications</label>
    <ul>
      <li><label><input type="radio" name="notifications" class="custom"><span></span>Send me email</label></li>
      <li><label><input type="radio" name="notifications" class="custom"><span></span>Don't send me email</label></li>
      <li><label><input type="radio" name="notifications" class="custom"><span></span>Send me flowers</label></li>
    </ul>
  </fieldset>

  <fieldset>
    <label for="url">URL</label>
    <input type="url" id="url" class="form-text" placeholder="http://yourdomain.com" />
  </fieldset>

  <fieldset>
    <label for="bio">Bio</label>
    <textarea id="bio"></textarea>
  </fieldset>

  <fieldset class="check">
    <label><input type="checkbox" class="custom"><span></span>I accept the terms of service.</label>
  </fieldset>

  <fieldset class="form-actions">
    <input type="submit" value="Submit" />
  </fieldset>
</form>

	<form class="multi beside">
  <fieldset class="date_picker_set">
    <fieldset class="form_group">
      <label for="startdateB">From</label>
      <input type="text" id="startdateB" class="datepicker append_icon">
      <label for="startdateB" class="append_to"><span class="icon-calendar"></span></label>
    </fieldset>
    <fieldset class="form_group">
      <label for="enddateB">To</label>
      <input type="text" id="enddateB" class="datepicker append_icon">
      <label for="enddateB" class="append_to"><span class="icon-calendar"></span></label>
    </fieldset>
  </fieldset>
</form>