create an input link in the button-CodePudding

I'm currently learning web programming, and I'm confused how to input a link in the button when I press the button.

<div >
  <span >Best Seller</span>
  <button > Add to cart</button>
</div>

CodePudding user response：

Also you can trigger a link by JS.

<button onclick="window.location(this.getAttribute('data-link'))" data-link="/hello">go to hello</button>

CodePudding user response：

One way could be to use an anchor tag instead of the button and make it look like a button.

HTML:

<div >
  <a > Add to cart</a>
</div>

CSS:

.custom-btn {
  border: medium dashed green;
}

Alternatively, you could do:

<button  onclick="location.href='yourlink.com';"> Add to Cart </button>

CodePudding user response：

You can use the anchor tag and provide bootstrap class for button like,

<a  href="link"> Add to Cart</a>

CodePudding user response：

Try this:

<a href='http://my-link.com'>
    <button >
        Click Here
    </button>
</a>

CodePudding user response：

If the label "Add to cart" matches the expectations, we'd be talking about a form. A form that causes an element to be added typically uses POST method:

<form  method="post" action="/path/to/add/to/cart/script">
  <input type="hidden" name="product" value="123">
  <span >Best Seller</span>
  <button > Add to cart</button>
</form>

Alternatively, there's GET as well:

<form  method="get" action="/path/to/add/to/cart/script?product=123">
  <span >Best Seller</span>
  <button > Add to cart</button>
</form>

Since GET doesn't carry additional payload, you'll get the same effect with a regular anchor:

<a href="/path/to/add/to/cart/script?product=123">Add to cart</a>

You don't want search engine spiders to populate carts so you typically leave GET for data fetching.

CodePudding user response：

use this

 <a href="link">  <button > Add to cart</button> </a>