CODEWITHSUNDEEP
html
NOSFERATV
NOSFERATV

Reputation: 19

Create an input link in the button

How can I input a link in the button when I press the button?

<div class="buttons">
  <span class="sold-out-tag position-top-right">Best Seller</span>
  <button class="btn custom-btn position-bottom-right"> Add to cart</button>
</div>

Upvotes: 1

Views: 74

Answers (5)

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146490

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 the POST method:

<form class="buttons" method="post" action="/path/to/add/to/cart/script">
  <input type="hidden" name="product" value="123">
  <span class="sold-out-tag position-top-right">Best Seller</span>
  <button class="btn custom-btn position-bottom-right"> Add to cart</button>
</form>

Alternatively, there's GET as well:

<form class="buttons" method="get" action="/path/to/add/to/cart/script?product=123">
  <span class="sold-out-tag position-top-right">Best Seller</span>
  <button class="btn custom-btn position-bottom-right"> 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.

Upvotes: 0

lakshna S
lakshna S

Reputation: 273

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

<a class="btn btn-success" href="link"> Add to Cart</a>

Upvotes: 0

Maik Lowrey
Maik Lowrey

Reputation: 17586

Also you can trigger a link by JavaScript.

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

Upvotes: 1

BiswajitPaloi
BiswajitPaloi

Reputation: 641

Try this:

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

Upvotes: 0

Arpan Kc
Arpan Kc

Reputation: 938

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

HTML:

<div class="buttons">
  <a class="btn custom-btn position-bottom-right"> Add to cart</a>
</div>

CSS:

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

Alternatively, you could do:

<button class="btn custom-btn position-bottom-right" onclick="location.href='yourlink.com';"> Add to Cart </button>

Upvotes: 0

Related Questions