Add Button Border Controls

buttons.php

<?php

/**
 * Add button controls to customiser
 */
function wcd_customize_controls_register($wp_customize)
{
    $wp_customize->add_setting('button_border_colour', array(
    ));
    $wp_customize->add_control(
        new WP_Customize_Color_Control(
            $wp_customize,
            'button_border_colour',
            array(
                'label' => __('Border Color'),
                'section' => 'buttons_color_section',
                'settings' => 'button_border_colour',
            ))
    );
    $wp_customize->add_setting('button_border_hover_colour', array(
    ));
    $wp_customize->add_control(
        new WP_Customize_Color_Control(
            $wp_customize,
            'button_border_hover_colour',
            array(
                'label' => __('Border Hover Color'),
                'section' => 'buttons_color_section',
                'settings' => 'button_border_hover_colour',
            ))
    );

    $wp_customize->add_setting(
        'button_border_thickness',
        array(
            'default' => 0,
        )
    );
    $wp_customize->add_control('button_border_thickness', array(
        'type' => 'number',
        'section' => 'buttons_color_section',
        'label' => __('Border Thickness'),
        'description' => __('Define a border thickness in px'),
    ));

    $wp_customize->add_setting(
        'button_border_radius',
        array(
            'default' => 0,
        )
    );
    $wp_customize->add_control('button_border_radius', array(
        'type' => 'number',
        'section' => 'buttons_color_section',
        'label' => __('Border Radius'),
        'description' => __('Define a border radius in px'),
    ));
}
add_action('customize_register', 'wcd_customize_controls_register');

/**
 * Output customiser css
 */
function wcd_customiser_css()
{
    $button_border_colour = get_theme_mod('button_border_colour') ? get_theme_mod('button_border_colour') : '';
    $button_border_hover_colour = get_theme_mod('button_border_hover_colour') ? get_theme_mod('button_border_hover_colour') : '';
    $button_border_thickness = get_theme_mod('button_border_thickness') ? get_theme_mod('button_border_thickness') : 0;
    $button_border_radius = get_theme_mod('button_border_radius') ? get_theme_mod('button_border_radius') : 0;
    $css = '<style>
	button,
	html input[type="button"],
	input[type="reset"],
	input[type="submit"],
	a.button,
	a.button:visited,
	a.wp-block-button__link:not(.has-background) {
		border-radius: ' . $button_border_radius . 'px;
		border: ' . $button_border_thickness . 'px solid ' . $button_border_colour . ';
	}
	button:hover,
	html input[type="button"]:hover,
	input[type="reset"]:hover,
	input[type="submit"]:hover,
	a.button:hover,
	a.wp-block-button__link:not(.has-background):hover {
		border-radius: ' . $button_border_radius . 'px;
		border: ' . $button_border_thickness . 'px solid ' . $button_border_hover_colour . ';
	}
	</style>';

    echo $css;
}
add_action('wp_head', 'wcd_customiser_css');

?>