按钮内的HTML-HREF标签

This is my button code, which has a reference tag, and the URL takes me to an index action correctly

<button type="submit" class="btn btn-primary"><a style="color:white" href="<?php echo $this->basePath('calendar/details/index').'?month='.$this->previousMonth?>"> Previous </a></button>

and this is the picture of the button

The problem is that only the text Previous on button is clickable, other than that any click on the blue part of the button does not work. How to make the whole area of the button work, without disturbing the URL?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a class="btn btn-primary" style="color: white" href="#">Previous</a>

<a class="btn btn-primary" style="color: white" href="<?php echo $this->basePath('calendar/details/index').'?month='.$this->previousMonth?>">Previous</a>

</div>