toggleButton (redactor plugin)

toggleButton.css

a.button {
  display: inline-block;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  padding: 10px 20px 9px 20px;
  cursor: pointer;
  outline: none;
  border: none;
  vertical-align: middle;
  text-decoration: none;
  zoom: 1;
  position: relative;
  background-color: #fa4c2a;
  color: #fff !important;
  border: none;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-right: 5px;
  margin-bottom: 4px;
  text-decoration: none !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

a.button:hover {
  outline: none;
  color: #fff !important;
  background-color: #fa4c2a !important;
}

toggleButton.js

(function ($R) {
  $R.add('plugin', 'toggleButton', {
    translations: {
      en: {
        toggleButton: 'Apply Button Style',
      },
    },
    init: function (app) {
      this.app = app;
      this.lang = app.lang;
      this.toolbar = app.toolbar;
      this.selection = app.selection;
    },
    // public
    start: function () {
      //Define the button object
      var btnObj = {
        title: this.lang.get('toggleButton'),
        api: 'plugin.toggleButton.toggle',
      };

      //Add the button to the toolbar
      this.$button = this.toolbar.addButton('toggleButton', btnObj);
    },
    toggle: function () {
      //This is what happens on when the button is clicked

      //Class that we will toggle
      var classToToggle = 'button';
      //Get all the links that are selected
      var selectedLinks = this.selection.getInlines({ all: true, tags: ['a'] });

      //Loop through all the links and toggle the class
      selectedLinks.forEach(function (element) {
        //Crossbrowser toggle class
        if (element.classList) {
          element.classList.toggle(classToToggle);
        } else {
          // For IE9
          var classes = element.className.split(' ');
          var i = classes.indexOf(classToToggle);

          if (i >= 0) classes.splice(i, 1);
          else classes.push(classToToggle);
          element.className = classes.join(' ');
        }
      });
    },
  });
})(Redactor);