CODEWITHSUNDEEP
cssbutton
Xavi Alsina
Xavi Alsina

Reputation: 653

Change background color (Jquery? Css3?)

UPDATE

Update:

As following Zach Saucier instructions, added the following codes:

JS

this.onclick = function() { this.style.background = "red"; this.innerHTML = "Bought"; }

So the button is: 

<a onclick="javascript:func(this)" class="ajax_add_to_cart_button comprar_mat" rel="ajax_id_product_14" href="../cart.php?add&amp;id_product=14" id="matricularme">Matricularme</a>

But still does not work

I am trying to add some effects on a few buttons in my website and I am not able to do it.

The HTML link (shown as button) looks like this:

<td class="marker">
    <a class="ajax_add_to_cart_button comprar_mat" rel="ajax_id_product_14" href="../cart.php?add&amp;id_product=14">Buy it now!</a>
</td>

As you can see this button adds a product on my website, and I just want to change the whole text to "Bought" text and replacing the background also.

What should I use? Any kind of Jquery? Or maybe just adding a css style where one sprite-image is "Buy it now!" and "Bought", so just change the background position?

Thanks

Upvotes: 0

Views: 100

Answers (1)

vals
vals

Reputation: 64164

For this HTML

<td class="marker">
    <a onclick="buy()" id="myid">Buy it now!</a>
</td>

Set this JS

function buy() { 
    var ele=document.getElementById("myid");
    ele.style.background = "red"; 
    ele.innerHTML = "Bought"; 
}

fiddle

Another version, incorporating the reusabilitysugested by Zach and the variable string handling:

<td class="marker">
    <a onclick="buy(this)" id="myid">Buy it now!</a>
</td>
<br>
<td class="marker">
    <a onclick="buy(this)" id="myid">Buy it as gift!</a>
</td>


function buy(ele) { 
    ele.style.background = "red"; 
    ele.innerHTML = ele.innerHTML.replace("Buy it", "Bought"); 
}

demo

Upvotes: 2

Related Questions