Is there a way to have button in a anchor tag, that acts like another link?

Question

I'm trying to have a button with an onclick event, that acts like a normal link inside another link.

<a href="http://link1.com">
    <div>
        <h3>Some text</h3>
        <p>Some other text</p>
        <button onclick= 'window.location="http://www.google.de";'>Test</button>
    </div>
</a>

I want to be able to click the whole div to get to link1, but if I click the button it should take me to google.de. Is there a possible way?

No. It's invalid HTML, and for good reason. Different browsers behave differently when faced with such an arrangement. — Alohci, Jun 03 '19 at 06:50

score 0 · Accepted Answer · answered Jun 04 '19 at 05:14

I found a solution. I just put the button outside of the div, gave it an absolute position and then centered it in the div.

I couldn't manage to implement bootstrap here so the design is messed up.

body {
  margin: 0;
  margin-top: 30px;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  font-family: Poppins;
  background-color: #f5f5f5;
  margin-left: auto;
  margin-right: auto;
}

a {
  color: black;
  text-decoration: none !important;
}

a:hover {
  color: inherit;
}

.person {
  border-bottom: 1px solid #e6e9ec;
  background-color: white;
  padding: 10px;
  line-height: 0.6;
  text-align: left;
  height: 160px;
}

.person:hover {
  transition: all ease-in-out 0.25s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

.name {
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 18px;
  padding-top: 20px;
}

.name:hover {
  text-decoration: underline;
}

.sector {
  margin-bottom: 20px;
}

/* FORM */

.connect-btn {
  position: relative;
  left: calc(90% - 50px);
  top: -100px;
  margin-right: 35px;
}

.custom-btn {
  border-color: #00008b;
  color: #00008b;
}

.custom-btn:hover {
  background-color: #00008b;
  border-color: #00008b;
  color: white;
}

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<div class="container">

  <a href='www.google.de'>
    <div class='person'>
      <h4>Some text</h4>
      <p>Other text</p>
      <p>More text</p>
    </div>
  </a><a class='btn my-2 my-sm-0 custom-btn connect-btn' href='http://www.google.de'>Connect</a>

</div>

score 0 · Answer 2 · answered Jun 04 '19 at 11:26

That's a bad markup. I modified the snippet added backgrounds for your understanding. It is better to use anchor tags than using button with javascript redirect, but I'll just leave it the way you build it. If you plan to change it to an anchor then you need add css to make it look like a button or use .btn.btn-primary if your using bootstrap.

.item {
  position: relative;
  padding-bottom:20px;
  background: blue;
}
.item a {
  display: block;
  background: red;
}
.item button {
  display:inline-block;
  position: absolute;
  bottom: 0;
}

<div class="item">
  <a href="http://link1.com">
  <div>
    <h3>Some text</h3>
    <p>Some other text</p>
  </div>
  </a>
  <button onclick= 'window.location="http://www.google.de";'>Test</button>
</div>

Is there a way to have button in a anchor tag, that acts like another link?

2 Answers2