Change images into css buttons.

Modules, Add-ons and custom code that's more than just a quick hack or Mod.
Post Reply
stam
Posts: 12
Joined: Fri Apr 01, 2011 8:51 pm
Location: Greece

Change images into css buttons.

Post by stam »

Hello community,
I wanted to ask if it is possible to change images (such as AddtoCart.gif - Wishlistbutton.gif) into css buttons. Does any of you guys have implement something like this? Any ideas maybe?

Thanks in advance,
Stam
MegaFemaTron2
Confirmed
Confirmed
Posts: 84
Joined: Thu Oct 13, 2011 8:37 pm

Re: Change images into css buttons.

Post by MegaFemaTron2 »

stam wrote:Hello community,
I wanted to ask if it is possible to change images (such as AddtoCart.gif - Wishlistbutton.gif) into css buttons. Does any of you guys have implement something like this? Any ideas maybe?

Thanks in advance,
Stam
Yes, we changed all of our buttons into CSS buttons. For instance, this is the addtocart button code:

Code: Select all

<input class="Submit" type="submit" alt="Add To Cart" value="Add To Cart">
You have to change your "Submit" class like how ours is below. And if you want all of your buttons to be the same, any button on your site using the class="Submit" will look like this.

Code: Select all

input[type="submit"] {
    background-color: #000000;
    border: medium none;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 9px;
    height: 24px;
    margin-left: 4px;
    opacity: 100;
    padding: 5px;
    text-transform: uppercase;
}
Attachments
This is one of our CSS buttons
This is one of our CSS buttons
css.JPG (6.6 KiB) Viewed 6849 times
ISC 6.1.1 Ultimate Edition
stam
Posts: 12
Joined: Fri Apr 01, 2011 8:51 pm
Location: Greece

Re: Change images into css buttons.

Post by stam »

MegaFemaTron2 wrote:
stam wrote:Hello community,
I wanted to ask if it is possible to change images (such as AddtoCart.gif - Wishlistbutton.gif) into css buttons. Does any of you guys have implement something like this? Any ideas maybe?

Thanks in advance,
Stam
Yes, we changed all of our buttons into CSS buttons. For instance, this is the addtocart button code:

Code: Select all

<input class="Submit" type="submit" alt="Add To Cart" value="Add To Cart">
You have to change your "Submit" class like how ours is below. And if you want all of your buttons to be the same, any button on your site using the class="Submit" will look like this.

Code: Select all

input[type="submit"] {
    background-color: #000000;
    border: medium none;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 9px;
    height: 24px;
    margin-left: 4px;
    opacity: 100;
    padding: 5px;
    text-transform: uppercase;
}
Thank you for your reply,
I just figure out a quite similar solution!
I used sliding door technique. I will post soon the code...
Post Reply