How To Create CSS Image Buttons In Your Magento Themes

Many developers and store owners don’t like to use images as buttons simply because they do not wish their users to wait until the images load. Image buttons gives the flexibility to display images as per store’s requirement but these days lots and lots of stores are opting to create CSS image buttons rather than image buttons. With a very little tweak you can get rid of image buttons in your theme and switch to CSS buttons. If you are willing to change your image buttons to CSS powered buttons then follow the steps given below:

Take a nice background image which is blank and nothing written on it. We will use this background image to generate text over it. Basically, if you follow CSS buttons you don’t have to create separate images for each button. Download the background image given below for an example (you can create your own image background).

 

In your theme template you will find various instances where you have to change image button to CSS button. For an example we will take “Proceed to Checkout” button code app/design/frontend/default/Your_theme/template/checkout/onepage/link.phtml

By default you will see something like this (if you are using default theme)

1	<a href="<?=$this->getCheckoutUrl()?>"><img src="<?=$this->getSkinUrl('images/btn_proceed_to_checkout.gif')?>" alt="<?=__('Proceed to Checkout')?>"/></a>

Now, we will use CSS and HTML to tweak and change the background for this button.

1	<a class="css-button btn-checkout" href="<?php echo $this->getCheckoutUrl()?>"><span><?php echo Mage::helper('checkout')->__('Proceed to Checkout');?></span></a>

Note: if you are using v 1.7 then change like this

1	<a class="css-button btn-checkout" href="<?php echo $this->getCheckoutUrl()?>"><span><?php echo $this->__('Proceed to Checkout')?></span></a>

You will notice that we have called css-button class along with btn-checkout which will enable us to change font color or size later if needed. Your CSS button is ready. Now, lets write the CSS for this button

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

.btn-checkout { display:block; float:right; background:transparent url(../images/btn_proceed_to_checkout_rad.gif) no-repeat 100% 0; font-size:15px; font-weight:bold; padding-right:8px; } .btn-checkout, .btn-checkout:hover { color:#fef5e5; text-decoration:none; } .btn-checkout span { display:block; padding:0 17px 0 25px; background:transparent url(../images/btn_proceed_to_checkout_bg.gif) no-repeat; line-height:40px; }

You are done, your CSS button is ready, just clear your cache and see the CSS button.

Similarly, you can change the buttons of other instances like Add To Cart etc. E.g.app/design/frontend/default/your_theme/template/checkout/onepage/review.phtml

change this

1	<input type="image" src="<?php echo $this->getSkinUrl('images/btn_place_order.gif') ?>" onclick="review.save();" value="<?php echo $this->__('Place Order') ?>" />

To

1	<a class="css-button btn-checkout" href="#" onclick="review.save();"><span><?php echo $this->__('Place Order') ;?></span></a>

Changing image buttons to CSS buttons is an easy task if you follow the steps given above but make sure that you switch to all instances of image buttons to CSS one’s otherwise your store might look awkward. Please leave me a comment and let me know if this trick helped you to convert your Magento store image buttons to CSS buttons. Don’t forget to subscribe our RSS to receive latest updates delivered to your mailbox.