Wordpress - registering sidebar and adding a button directly after .textwidget

Question

I have registered a new widget area, code as below and want to add a button after the .textwidget, however cannot seem to do it properly. Adding it after the </li> results in the button not being contained within a container and thus messes up the page - which is to be expected.

It's not possible to add a container to the <li class="parallax"> boxes using conventional methods - the only way i can think of is via jQuery which really isn't ideal. I want to know if there's anything i can add to the register sidebar function, or something else, in order to get a <button> directly after the .textwidget.

At the moment i have the button inside the .textwidget by adding the code in to the widget areas in the back-end, but it's not quite as i want it. Of course i could absolutely position the buttons and what-not, but there would be an issue with extending the button outside of it's parent container (it has some padding too).

The functions.php

if (function_exists('register_sidebar')) {
     register_sidebar(array(
        'name'=> 'Parallax Area',
        'id' => 'parallax',
        'before_widget' => '<li class="parallax-box">',
        'after_widget' => '</li>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));
}

The HTML

    <div class="parallax">
        <div class="container">
            <ul>

                <?php 
                    if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Parallax Area')) : ?>
                <?php endif; ?>

            </ul>
        </div><!-- .container -->
    </div><!-- .parallax -->

The current HTML output

<div class="parallax">
    <div class="container">
        <ul>

            <li class="parallax-box">
                <h2>Computer Repair</h2>            
                <div class="textwidget">Here will be some text that explains the contents of this box and allows them to click through to a page.

                <button class="btn-action">Learn More...</button></div>
            </li>
            <li class="parallax-box">
                <h2>Computer Repair</h2>            
                <div class="textwidget">Here will be some text that explains the contents of this box and allows them to click through to a page.

                <button class="btn-action">Learn More...</button></div>
            </li>               <li class="parallax-box">
                <h2>Computer Repair</h2>            
                <div class="textwidget">Here will be some text that explains the contents of this box and allows them to click through to a page.

                <button class="btn-action">Learn More...</button>
                </div>
            </li>               <li class="parallax-box">
                <h2>Computer Repair</h2>            
                <div class="textwidget">Here will be some text that explains the contents of this box and allows them to click through to a page.

                <button class="btn-action">Learn More...</button></div>
            </li>                   
        </ul>
    </div><!-- .container -->
</div>

Answer 1

Well as long as the buttons are all the same:

if (function_exists('register_sidebar')) {
 register_sidebar(array(
    'name'=> 'Parallax Area',
    'id' => 'parallax',
    'before_widget' => '<li class="parallax-box">',
    'after_widget' => '<button class="btn-action">Learn More...</button></li>',
    'before_title' => '<h2>',
    'after_title' => '</h2>',
));
}

If the buttons were not all the same, you could make them be the same and specify the target href in the .textwidget on the button click action with jQuery:

 <li class="parallax-box">
            <h2>Computer Repair</h2>            
            <div class="textwidget" data-href="http://link/to/your/content">Here will be some text that explains the contents of this box and allows them to click through to a page.

            </div>
           <button class="btn-action">Learn More...</button>
 </li>  

.

    <script type="text/javascript">
        jQuery(document).ready(function() { 
            (function ($) { 

                $('.btn-action').on('click',function(e){
                    e.preventDefault();
                    var url = $(this).sibling('.textwidget')[0].getAttribute('data-href');
                    window.location.href=url;
                });

            })(jQuery);
        });
    </script>

Answer 2

If you can distinguish the text widgets by title and/or text content and you don't mind having a dummy <div> around the button, you could use the widget_text filter to close the textwidget div, open a new dummy one, and then append the button:

function wpse155912_widget_text( $text, $instance ) {
    if ( $instance['title'] == 'title1' && strpos( $text, 'text1' ) !== false ) {
        $href1 = esc_attr( get_permalink( get_page_by_title( 'page1' ) ) );
        $text .= '</div><div class="dummy"><button class="btn-action" onclick="window.location.href=\'' . $href1 . '\'">Learn more...</button>';
    } elseif ( $instance['title'] == 'title2' && strpos( $text, 'text2' ) !== false ) {
        // etc.
    }
    return $text;
}
add_filter( 'widget_text', 'wpse155912_widget_text', 10, 2 );