Button hyperlinks only work when opting to open them in a new tab-CodePudding

This one seems to have escaped me.

The code generates a vertical menu built around buttons (with images) and all 'looks' okay, but when clicking on the buttons nothing happens (although it appears the page is doing a refresh).

However, if I right-click and select the "Open link in new tab" option, the links open okay.

My research (1, 2, 3) shows that often the reason for this is there is some sort of javascript problem, but as far as I can tell that's not the case here.

If I change the <button > to <button type="button">, this resolves the linking issue but then loses all the formatting of the button (i.e. the .button CSS).

Any suggestions on what I'm missing here? Or is it likely to just be some SharePoint 2013 glitch in our workplace environment?

See code below:

<!DOCTYPE html>
<html>
<head>
<div style="background: #e5e5e5;padding:10px 15px;line-height:1.0!important;"> 
<style>

.button {
  height: 70px;
  width: 200px;
  display: block;
  padding: 10px 10px;
  margin: 20px 0px 10px 0px;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
line-height: 1.0 !important;
  outline: none;
  color: #fff;
  background-color: #54969C;
  border: none;
  border-radius: 15px;
  box-shadow: 4px 8px #999;
}

.button:hover {background-color: #00C8D2}

.button:active {
  background-color: #00C8D2;
  box-shadow: 4px 4px #666;
  transform: translateY(4px);
}

.img {
  float: right;
}

</style>
</head>
<body style="background-color:#cccccc;">

<h2 style="font-weight:bold;color:#54969C;">Latest news and information</h2>

<a href="http://sharepoint/kpsites/SITR/SitePages/Intermediaries_calendar.aspx"><button ><img src="http://sharepoint/kpsites/SITR/PublishingImages/SitePages/TPERM/TPERM_whats-on.png" alt="Document icon" style="width:46px;height:42px;float:right;"><p>What's on for tax professionals</p></button></a>

<a href="http://sharepoint/kpsites/SITR/SitePages/TPERM.aspx" target="_blank"><button ><img src="http://sharepoint/kpsites/SITR/PublishingImages/SitePages/TPERM/TPERM_emerging-issues.png" alt="Document icon" style="width:63px;height:42px;float:right;"><p>Fortnightly emerging issues report - 20Apr-4May</p></button></a>

<a href="http://sharepoint/kpsites/SITR/SitePages/TPERM.aspx" target="_blank"><button ><img src="http://sharepoint/kpsites/SITR/PublishingImages/SitePages/TPERM/TPERM_environmental-scan.png" alt="Document icon" style="width:61px;height:42px;float:right;"><p>Monthly environmental scan - Mar</p></button></a>

<a href="http://sharepoint/kpsites/SITR/SitePages/TPERM.aspx" target="_blank"><button ><img src="http://sharepoint/kpsites/SITR/PublishingImages/SitePages/TPERM/TPERM_consultation-report.png" alt="Document icon" style="width:56px;height:42px;float:right;"><p>Consultation report</p></button></a>


</body>
</html>

CodePudding user response：

Add both the type and the class see if it works.

.button {
  height: 70px;
  width: 200px;
  display: block;
  padding: 10px 10px;
  margin: 20px 0px 10px 0px;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
line-height: 1.0 !important;
  outline: none;
  color: #fff;
  background-color: #54969C;
  border: none;
  border-radius: 15px;
  box-shadow: 4px 8px #999;
}

.button:hover {background-color: #00C8D2}

.button:active {
  background-color: #00C8D2;
  box-shadow: 4px 4px #666;
  transform: translateY(4px);
}

.img {
  float: right;
}

<head>
<div style="background: #e5e5e5;padding:10px 15px;line-height:1.0!important;"> 
</head>
<body style="background-color:#cccccc;">

<h2 style="font-weight:bold;color:#54969C;">Latest news and information</h2>

<a href="http://sharepoint/kpsites/SITR/SitePages/Intermediaries_calendar.aspx"><button type="button" ><img src="http://sharepoint/kpsites/SITR/PublishingImages/SitePages/TPERM/TPERM_whats-on.png" alt="Document icon" style="width:46px;height:42px;float:right;"><p>What's on for tax professionals</p></button></a>

<a href="http://sharepoint/kpsites/SITR/SitePages/TPERM.aspx" target="_blank"><button type="button" ><img src="http://sharepoint/kpsites/SITR/PublishingImages/SitePages/TPERM/TPERM_emerging-issues.png" alt="Document icon" style="width:63px;height:42px;float:right;"><p>Fortnightly emerging issues report - 20Apr-4May</p></button></a>

<a href="http://sharepoint/kpsites/SITR/SitePages/TPERM.aspx" target="_blank"><button type="button" ><img src="http://sharepoint/kpsites/SITR/PublishingImages/SitePages/TPERM/TPERM_environmental-scan.png" alt="Document icon" style="width:61px;height:42px;float:right;"><p>Monthly environmental scan - Mar</p></button></a>

<a href="http://sharepoint/kpsites/SITR/SitePages/TPERM.aspx" target="_blank"><button type="button" ><img src="http://sharepoint/kpsites/SITR/PublishingImages/SitePages/TPERM/TPERM_consultation-report.png" alt="Document icon" style="width:56px;height:42px;float:right;"><p>Consultation report</p></button></a>


</body>