I need a solution that the entire button has color red and href should only have text "OCR" no need of OCR in hyperlink format. I have also added button images

.block0 {
  display: block;
  width: 100%;
  border: none;
  background-color: red;
  padding: 5px 15px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

<td><button><a href="/update_ocr/{{ row.0 }}" class="block{{row.3}}" value="{{row.3}}">OCR</a></button></td>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

First, don't wrap anchors with buttons. That's a mixing of intent, and it's invalid HTML.

Then, you just need to style your anchors as buttons and remove the text-decoration.

.anchor-btn {
  display: block;
  background-color: red;
  padding: 5px 15px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid #ccc;
  transition: all 0.3s;
}

.anchor-btn.green {
  background-color: green;
}

.anchor-btn:hover {
background-color: darkred;
}

.anchor-btn.green:hover {
  background-color: darkgreen;
}

td {
  padding: 4px;
}

<table>
  <tr>
    <td><a href="/update_ocr/{{ row.0 }}" class="anchor-btn block{{row.3}}" value="{{row.3}}">OCR</a></td>
    <td><a href="/update_ocr/{{ row.0 }}" class="anchor-btn green block{{row.3}}" value="{{row.3}}">OCR</a></td>
    <td><a href="/update_ocr/{{ row.0 }}" class="anchor-btn block{{row.3}}" value="{{row.3}}">OCR</a></td>
  </tr>
</table>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You are applying background-color to your link instead of the button, that's why the background color is only being applied to the link and not to the whole button.

NOTE: This is not a good way of structuring your code, I suggest you make your link look like a button or add an onClick event handler on the button to redirect user to your desired location. Do not use a link inside a button. This structure is not good for screen readers and your website/application will have bad accessibility scores.

Solution I suggest:

function onClick() {
  window.location.href = "#";
}

.link {
  text-decoration: none;
  background-color: red;
  padding: 5px 15px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

.btn {
  border: none;
  background-color: red;
  padding: 5px 15px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

<td><a href="#" class="link">OCR</a></td>

<td><button class="btn" onClick="onClick">OCR</button></td>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Solution to your problem:

.block0 {
  border: none;
  background-color: red;
  padding: 5px 15px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

.link0 {
  text-decoration: none;
}

<td><button class="block0"><a href="/update_ocr/{{ row.0 }}" class="link0" value="{{row.3}}">OCR</a></button></td>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>