A Shortcake UI example adding an editable button (cta) into body content in wordpress.

a-shortcode-ui.php

<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.

//**********************************************
// Setup CTA Button Widget
//**********************************************

/*
 * We have three attributes:
 * - Button Text
 * - Button URL
 * - Style Class
 * The first two are necessary but the last is to provide
 * options for alternative styles, which can be used for
 * different colors and sizes.
 *
 */

// Add Button Shortcode
//**********************************************

add_shortcode( 'cta_button', 'pb_register_button_shortcode' );
function pb_register_button_shortcode( $atts ){

	extract( shortcode_atts(
		array(
			'button_text'		=> 'Button Text',
			'button_url'	  	=> '',
			'button_style'		=> 'outline'
		),
		$atts
	));

	//Output the shortcode
	return '<span class="entry-cta"><a class="button style-' .$button_style. '" href="' .esc_url( $button_url ). '">' .esc_html( $button_text ). '</a></span>';

}


//* Register Button ShortCake UI
//**********************************************

add_action( 'init', 'pb_register_cta_button_ui' );
function pb_register_cta_button_ui() {

	if ( ! function_exists( 'shortcode_ui_register_for_shortcode' ) )
	return;

	shortcode_ui_register_for_shortcode( 'cta_button',
		array(
			'label'				=> 'Button',
			'listItemImage'	=> 'dashicons-admin-links',
			// UI Attributes
			'attrs'				=> array(

				// Button text ui filed
				array(
					'label'			=> 'Button Text',
					'attr'			=> 'button_text', // the attr from the shortcode
					'type'			=> 'text',
					'description'	=> 'Add your button text',
				),

				// Button link ui field
				array(
					'label'			=> 'Button URL',
					'attr'			=> 'button_url', // the attr from the shortcode
					'type'			=> 'url',
					'description'	=> 'Add a link to an internal or external page',
				),

				// Style ul filed
				array(
					'label'			=> 'Button Style',
					'attr'			=> 'button_style',
					'type'			=> 'select',
					'options'		=> array(
						'outline'	=> 'Outline',
						'solid'		=> 'Solid',
					),
				),

			),
		)

	);
}

editor-style.sass

/*
 * You need to define the style that will be applied to the element
 * within the tinymce editor to create a cohesive experience.
 *
 */

.button
	background-color: $primary-color
	color: $white
	cursor: pointer
	font-family: $headings-font
	font-size: 16px
	font-size: 1.6rem
	font-weight: $bold
	letter-spacing: 1px
	line-height: 1
	padding: 17px 25px
	text-decoration: none
	white-space: normal
	width: auto
	text-transform: uppercase


span.entry-cta
	text-align: center
	display: block
	margin: 0 0 28px

	a.style-solid
		border: 2px solid $primary-color
		background-color: $primary-color
		color: $white

		&:hover
			border: 2px solid $primary-color
			background-color: transparent
			color: $primary-color
	    
	a.style-outline
		border: 2px solid $primary-color
		background-color: transparent
		color: $primary-color

		&:hover
			border: 2px solid $primary-color
			background-color: $primary-color
			color: $white

style.sass

.button
	background-color: $primary-color
	color: $white
	cursor: pointer
	font-family: $headings-font
	font-size: 16px
	font-size: 1.6rem
	font-weight: $bold
	letter-spacing: 1px
	line-height: 1
	padding: 17px 25px
	text-decoration: none
	white-space: normal
	width: auto
	text-transform: uppercase


span.entry-cta
	text-align: center
	display: block
	margin: 0 0 28px

	a.style-solid
		border: 2px solid $primary-color
		background-color: $primary-color
		color: $white

		&:hover
			border: 2px solid $primary-color
			background-color: transparent
			color: $primary-color
	    
	a.style-outline
		border: 2px solid $primary-color
		background-color: transparent
		color: $primary-color

		&:hover
			border: 2px solid $primary-color
			background-color: $primary-color
			color: $white