referring https://www.w3schools.com/css/css3_buttons.asp
on reszing the page the button control overlaps image control all other controls on page gets aligned one below another only issue with this 2
how to prevent overlapping
<div class="container">
<div id="red" class="span6" style="width:40%;float:left;margin-right:5%;">
<div>
<h4 class="text-center">
<img src="~/images/main.jpg " height="600px" style=" border: 2px solid black; padding:0px;"
alt="main" width="440px" />
</h4>
</div>
</div>
<div id="blue" class="span6 " style="width:50%;float:left;">
<a href="@Url.Action("Index", "Details",new { FirstName = "Test", LastName = "Test"} )">
<button id="details" onclick="location.href=parentNode.href" style="background-color:blue ; box-shadow: 0 8px 16px 0 rgba(4,0,3,0.2), 0 6px 20px 0 rgba(2,4,2,2.19);width: 100%; " class="button button4 ">
Welcome to the test
<br />test1
<br />or test2
<h3 class="btn-info ">
<span class="xlarge-text bold">
Choose Your <span style="text-decoration: underline;">Test</span>
</span>
</h3>
Receive Info
<br />Services
<br />Thankyou
</button>
</a>
</div>