Add Custom Buttons to TinyMCE in WordPress

Read this tutorial. https://www.gavick.com/magazine/adding-your-own-buttons-in-tinymce-4-editor.html#tc-section-4

Very detailed tutorial. But the most basic requirements are as follows: add the following code in functions.php to register and create the button:

function add_container_button() {
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
 return;
if ( get_user_option('rich_editing') == 'true') {
 add_filter('mce_external_plugins', 'add_container_plugin');
 add_filter('mce_buttons_3', 'register_container_button');
}
}
add_action('init', 'add_container_button');


function register_container_button($buttons) {
array_push($buttons, "|", "skizzar_container");
return $buttons;
}

function add_container_plugin($plugin_array) {
$plugin_array['skizzar_container'] = plugin_dir_url( __FILE__ ) . 'shortcodes-js/container.js';;
return $plugin_array;
}

Then you need to create a js file that handles the behavior of the button in the editor (you can see my code is called container.js in the code above. Here is the code of my js file:

(function() {
tinymce.PluginManager.add('skizzar_container', function( editor, url ) {
    editor.addButton( 'skizzar_container', {
        title: 'Add a Container',
        icon: 'icon dashicons-media-text',
        onclick: function() {
editor.windowManager.open( {
    title: 'Container',
    body: [{
        type: 'listbox',
        name: 'style',
        label: 'Style',
        'values': [
            {text: 'Clear', value: 'clear'},
            {text: 'White', value: 'white'},                
            {text: 'Colour 1', value: 'colour1'},
            {text: 'Colour 2', value: 'colour2'},
            {text: 'Colour 3', value: 'colour3'},
        ]
    }],
    onsubmit: function( e ) {
        editor.insertContent( '[container style="' + e.data.style + '"]<br /><br />[/container]');
    }
});
}

    });
});
})();

This will create a popup with a dropdown menu where the user can select a style. Hope this helps