HOME  >   HTML5 CANVAS  >   CSS3 ANIMATION  >   SVG Option Toggle Button With 3 Options
SVG Option Toggle Button With 3 Options
BY Donald12 Jan,2021

This is a special switch button, unlike many CSS3 switch buttons shared before, this one is based on SVG and HTML5, its biggest feature is that it can provide 3 options to switch animation, can provide "yes", "may be" and "no" 3 options to choose, and different state options will also correspond to different small icons.


SVG Option Toggle Button With 3 Options
HTML Body Code
<div id="buttons">
  <input type="radio" name="yesMaybeNo" id="rYes" checked />
  <label for="rYes">Yes</label>

  <input type="radio" name="yesMaybeNo" id="rMaybe" />
  <label for="rMaybe">Maybe</label>

  <input type="radio" name="yesMaybeNo" id="rNo" />
  <label for="rNo">No</label>
Css Code
body{background: #1e2730;color:linen; font-family: verdana}
svg {
  width: 10em;
  /*border: 1px solid #d9d9d9;*/
	width: 10em;
  margin: 30px auto;
#buttons{text-align:center; margin:1em;}

Js Code
    key: "updateProp",
    value: function updateProp(vi, i) {
      var dist = this.target[vi][i] - this.vals[vi][i];
      var acc = dist * spring;
      this.vel[vi][i] += acc;
      this.vel[vi][i] *= friction;
      this.vals[vi][i] += this.vel[vi][i];
  }, {
    key: "sayNO",
    value: function sayNO() {
      this.target = this.getArgsRy(this.no);
  }, {
    key: "sayMAYBE",
    value: function sayMAYBE() {
      this.target = this.getArgsRy(this.maybe);
  }, {
    key: "sayYES",
    value: function sayYES() {
      this.target = this.getArgsRy(this.yes);