Submit Button breaks another submit button in a different place.

[jubcheng]

I added a submit button to a page which breaks another one in a different place on the same page.
Adding an id or class does not change the interference.
Both buttons are inside a form.

<form class="add-to-cart" action="cart.html" method="post" >
    <input type="text" value="1" class="qty hidden">
    <button class="button" type="submit" value="Add To Cart"> <span class="ico ti-shopping-cart"></span></button>
</form>

button {
    text-align: center;
    background: transparent;
    font-size: 50px;
    transition: all 0.3s ease 0s;
    margin: 50% 15px 0 0;
    border: none;
    width: auto;
    height: 50px;
}

<form action="#" method="get">
    <input placeholder="Search here... " type="text">
    <button type="submit"></button>
</form>

.search__area .search__inner form button {
  background: transparent none repeat scroll 0 0;
  border: 0 none;
  border-radius: 0;
  cursor: pointer;
  height: 60px;
  line-height: 60px;
  position: absolute;
  right: 40px;
  top: 0;
  width: 60px;
  transition: 0.3s;
}

What do I need to change in the css of the add to cart button in order to not interfere with the search button ?

[patribezek]

Did you tried to modfy the margin percent in your button? maybe you need different values than 50% for both pages.

[Author]

Posts