Как правильно сделать кнопку внутри кликабельного div?

<div class="item-block" onclick="location.href='[[~[[+id]]]]';">
    <h2><a href="[[~[[+id]]]]">[[+pagetitle]]</a></h2>
    <div class="visual">
        <img style="display:block; margin:0 auto;" src="[[+thumb:default=`[[++assets_url]]components/minishop2/img/web/ms2_small.png`]]" width="150" height="140" alt="image description">
    </div>
    
    <div class="read-more-block">
        <form class="form-horizontal item-form ms2_form" method="post" data-action="cart/add">
             <input type="hidden" name="id" value="[[+id]]" />
             <input type="hidden" name="count" value="1">
             <button class="read-more2" type="submit" name="ms2_action" value="cart/add">В корзину</button>
        </form>   
    <div class="price">
         [[+old_price:gt=`0`:then=`<span class="new_price">[[+price]]</span><span class="old_price"><strong>[[+old_price]]</strong> <em>[[%ms2_frontend_currency]]</em></span>`:else=`<span class="new_price">[[+price]]</span>`]]
                         
    </div>
        <a class="read-more" href="[[~[[+id]]]]">Подробнее»</a>
    </div>
</div>