Creating CSS buttons vs Image buttons
There has been requests from many community members about the flexibility of the image buttons used in the Magento frontend default theme. This article serves to inform and inspire you to take advantage of what a little tweak in the HTML and CSS can do in swapping image buttons to CSS-powered ones. To those dedicated CSS ladies and gents - here’s to you.
Let’s start by downloading some images |
The following gifs are also available in PSD format for your toying pleasure - save it as png, gif, jpg, whatever suits your fancy. For demonstration purposes, we’re using the GIF format.
Download the following images, or save the above PSD in your preferred file format, and save it in your magento directory skin\frontend\default\default\images
Now for the Magic. |
The HTML |
Let’s use the “Proceed to Checkout” image button in the shopping cart for the occasion (shopping cart phtml can be found in app\design\frontend\default\default\template\checkout\cart.phtml in the Magento file structure)
HTML for Image button - comes with the default Magento package
- <a href="<?=$this->getCheckoutUrl()?>"><img src="<?=$this->getSkinUrl('images/btn_proceed_to_checkout.gif')?>" alt="<?=__('Proceed to Checkout')?>"/></a>
HTML for CSS button - change the style of the button with just a swap of the background
- <a class="img-btn btn-checkout" href="<?=$this->getCheckoutUrl()?>"><span><?=__('Proceed to Checkout')?></span></a>
Swap out the ‘HTML for Image button’ code with the ‘HTML for CSS button’ code. Note: The ‘img-btn’ class in the HTML just serves to unite all the CSS buttons in case you want to synchronize the font colors and sizes..etc.
The CSS |
- .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;
- }
And there you have it! - An all CSS-powered button.
