首页 › Magento设计人员手册

如何为magento创建CSS按钮替代图片按钮

星期日, 02/22/2009 - 19:09 — foolsky

创建CSS按钮 VS 图片按钮 这篇文章主要介绍如何把图片按钮用CSS控制的按钮替换。对比图片按钮来说，CSS按钮具有非常明显的优点。. 我们先来下载一些图片,保存下面这个图片到你的magento目录 skin/frontend/default/default/images   我们用购物车里的“结账“（Proceed to Checkout）图片按钮来举例。(购物车shopping cart的 phtml文件可以在 app/design/frontend/default/default/template/checkout/onepage/link.phtml这里找到) 图片按钮（Image button）的HTML代码

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

CSS 按钮的HTML代码 - 仅通过改变背景来修改按钮的风格

  1.  
  2. <a class="img-btn btn-checkout" href="<?php echo $this->getCheckoutUrl()?>">
  3. <span><?php echo Mage::helper('checkout')->__('Proceed to Checkout');?>
  4. </span>
  5. </a>
  6.  

用CSS button的HTML’代码替换图片按钮的HTML代码.CSS代码：

  1. .btn-checkout {
  2.     display:block;
  3.     float:right;
  4.     background:transparent url(../images/btn_proceed_to_checkout_rad.gif) no-repeat 100% 0;
  5.     font-size:15px;
  6.     font-weight:bold;
  7.     padding-right:8px;
  8.     }
  9. .btn-checkout, .btn-checkout:hover {
  10.     color:#fef5e5;
  11.     text-decoration:none;
  12.     }
  13. .btn-checkout span {
  14.     display:block;
  15.     padding:0 17px 0 25px;
  16.     background:transparent url(../images/btn_proceed_to_checkout_bg.gif) no-repeat;
  17.     line-height:40px;
  18.     }

And there you have it! - An all CSS-powered button. 补充说明，上面的代码在V1.7里不好用，所以更改link.phtml 这个代码为：

  1.  
  2. <a class="img-btn btn-checkout" href="<?php echo $this->getCheckoutUrl()?>">
  3. <span><?php echo $this->__('Proceed to Checkout')?>
  4. </span>
  5. </a>

Reference