TinyMCE class editor Advanced Custom Formats / Styles / Shortcode Buttons #wordpress

## editor-style.css
/* step 1: load this in editor-style.css in the theme folder */
/* step 2: activate function "Create CSS classes menu" in tinymce advanced */
/* this gets shown automatically in the formats dropdown */
/* sometimes this is a little bit tricky. delete and recreate "Formats" in the Tinymce Advanced settings */
.button {
    background-color:red;
    color:#fff;
    padding:10px 20px;
    display: inline-block;
    color:#fff;
    text-decoration:none;
    padding:10px 20px;
    font-weight:bold;
}

## functions.php
<?php
add_action('admin_head', function()
{
    // check user permissions
    if( !current_user_can('edit_posts') && !current_user_can('edit_pages') )
    {
        return;
    }
    // check if editor is enabled
    if( get_user_option( 'rich_editing' ) == 'true' )
    {
        add_filter( 'mce_external_plugins', function($plugin_array)
        {
            $plugin_array['mce_buttons'] = get_stylesheet_directory_uri().'/mce-button.js';
            return $plugin_array;
        });
    }
});
add_filter('mce_buttons', function($buttons)
{
    array_push( $buttons, 'mce_button_1' );
    array_push( $buttons, 'mce_button_2' );
    return $buttons;
});

## mce-button.js
(function() {

	tinymce.PluginManager.add('mce_buttons', function( editor, url ) {

		// single button
		editor.addButton('mce_button_1', {
			text: 'Button #1',
			icon: false,
			onclick: function() {
				editor.insertContent('<p><a href="#" class="button">Mehr erfahren</a></p>');
			}
		});

		// dropdown and buttons
		editor.addButton( 'mce_button_2', {
			text: 'Dropdown',
			icon: false,
			type: 'menubutton',
			menu: [
				{
					text: 'Button #1',
					menu: [
						{
							text: 'Button #1.1',
							onclick: function() {
								editor.insertContent('...');
							}
						},
						{
							text: 'Button #1.2',
							onclick: function() {
								editor.insertContent('...');
							}
						}
					]
				},
				{
					text: 'Button #2',
					menu: [
						{
							text: 'Button #2.1',
							onclick: function() {
								editor.insertContent('...');
							}
						},
						{
							text: 'Button #2.2',
							onclick: function() {
								editor.insertContent('...');
							}
						}
					]
				}
			]
		});
	});

})();