TinyMCE how to add a custom toolbar button?

In this article I have explain how to simply add a custom toolbar button to the TinyMCE Visual Editor. 

tinymce.init({
 selector: 'textarea#add-custom-button',
 plugins: 'code wordcount',
 toolbar: 'undo redo | currentdate',
 content_css: [
 '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
 '//www.tiny.cloud/css/codepen.min.css'],

setup: function (editor) {

editor.addButton('my-custombtn', {//add button name to toolbar
 text: 'My Custom Insert Button',
 tooltip: 'Insert html text on click.',
 onclick: function() {
 editor.insertContent('&nbsp;<a href="google.com" id="btnPurchaseBox" >Make google search</a>&nbsp;');
 }
 });
 }
});

Add button options - button configuration properties:

• text - the text that will show up on the button
  
• icon - CSS class for the icon (from one of the loaded stylesheets)
  
• image - URL of the image (16x16 recommended) to use as an icon (overrides icon option if defined)
  
• tooltip - tooltip to pop up on hover
  
• onclick - callback to call when button is clicked
  
• onpostrender - callback to call when button is rendered