Simple plugin to Transform Radio Inputs to HTML Buttons

Simple Button Radios is a simple plugin that converts radio inputs into HTML buttons for CSS customization.

High performance, keyboard support, and preservation of original click/change events.

Must Read – How to Add Floating Whatsapp Chat Button In HTML | venom-button

How to make use of it:

1. Load the latest jQuery library, simple-button-radios.css, and simple-button-radios.js into the document.

<link rel="stylesheet" href="simple-button-radios.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="simple-button-radios.js"></script>

2. Calling the function will apply default styles to radio buttons on the web page.

<div class="radio">
  <input type="radio" name="genere" id="female" value="female" checked>
  <label for="female">
    Female
  </label>
</div>
<div class="radio">
  <input type="radio" name="genere" id="male" value="male">
  <label for="male">
    Male
  </label>
</div>
<div class="radio">
  <input type="radio" name="genere" id="robot" value="robot" disabled>
  <label for="robot">
    Robot
  </label>
</div>

3. Customize check/deselect icons.

$('input[type="radio"]').simpleButtonRadios({
  checkedIcon : '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="-725.53 115.775 1451.338 1451.338"><path d="M.141 376.731c-256.717 0-464.713 207.995-464.713 464.713 0 256.72 207.997 464.715 464.713 464.715 256.718 0 464.712-207.995 464.712-464.715 0-256.718-207.994-464.713-464.712-464.713z"/></svg>',
  nonCheckedIcon : ''
});

4. Customize the cover element.

$('input[type="radio"]').simpleButtonRadios({
  wrapContainer : 'none'
});

5. Customize the category and attributes of HTML buttons.

$('input[type="radio"]').simpleButtonRadios({
  buttonClass: "sbr-default",
  btnAttributes : {
    'type' : 'button'
  }
});

6. Callback functions available.

$('input[type="radio"]').simpleButtonRadios({
  onInit : null,
  onChange : null,
  changeCallback : null,
  onDestroy: null
});

7. API methods.

// destroy the plugin
$('input[type="radio"]').simpleButtonRadios('destroy');

// add an event listener to an element
$('input[type="radio"]').simpleButtonRadios('addListener', node);

// enable/disable the plugin
$('input[type="radio"]').simpleButtonRadios('disable', boolean);

Must Read – Hierarchical jQuery Folder Tree Structure Plugin In HTML CSS | zTree

Options

ParameterTypeDefaultDescription
buttonClassstring'sbr-default'The class attribute value for new html button tag
checkedIconstring'<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="-725.53 115.775 1451.338 1451.338"><path d="M.141 376.731c-256.717 0-464.713 207.995-464.713 464.713 0 256.72 207.997 464.715 464.713 464.715 256.718 0 464.712-207.995 464.712-464.715 0-256.718-207.994-464.713-464.712-464.713z"/></svg>'button inner html when input is checked
nonCheckedIconstring''button inner html when input is not checked
wrapContainerstring'none'Values: ‘none’ or ‘input’ or ‘all’. Wrap with a div label and input, only input or nothing.
btnAttributesobject{ type : 'button' }Add attribute name – value into new html button. Example:
btnAttributes: {
  data-title : 'string value'
}

Callbacks

ParameterTypeDefaultDescription
onInit(simpleButtonRadios)functionnullA callback function will be executed right after plugin initialization
onChange(simpleButtonRadios)functionnullThe function will be executed right before the radio input change
changeCallback(simpleButtonRadios)functionnullA callback function will be executed right after the radio input change
onDestroy(simpleButtonRadios)functionnullA callback function will be executed when you destroy Swiper

Customizable Radio Button Plugin With jQuery, simple-button-radios Plugin/Github, big radio button, radio button with image

Read More –

Simple and Beautiful Button Templates In CSS | Digitso-Buttons
Animated Neon Light Buttons Animation Effects In Pure CSS
Simple Angular 6+ Material Design Progress Buttons


See Demo And Download

Official Website(joelthorner): Click Here

This superior jQuery/javascript plugin is developed by joelthorner. For extra Advanced Usage, please go to the official website.

Share