И так будем подключать красивые кнопки отсюда
Демо http://tympanus.net/...iveLinkEffects/
Сайт http://tympanus.net/...e-link-effects/
И так скачиваем архив с кодом и css. Распаковываем, архив и подключаем css и js в наш шаблон.
Идем по адресу media/zoo/applications/jbuniversal/elements/jbpriceadvance/tmpl/_buttons.php Тут есть два варианта: легкий и сложный, я пошел по легкому и просто добавил необходимые классы и элементы, чтоб не переписывать уже готовое css, но можно заморочиться и переписать все, что касается nav и поменять его на div class="jbprice-buttons" ,но я не морочился.
Теперь нам надо удалить классы для ссылок jbzoo-button green, чтоб они нам не мешались, далее добавляем теги section и nav, при этом nav с выбранным стилем из демки. Добавляем span внутрь ссылки.
И получаем примерно такой код
<div class="jbprice-buttons">
<section><nav class="cl-effect-20">
<?php if ($mode == 'normal') : ?>
<a rel="nofollow" href="#add-to-cart" class="jsAddToCart"
title="<?php echo JText::_('JBZOO_JBPRICE_ADD_TO_CART'); ?>"><span data-hover="<?php echo JText::_('JBZOO_JBPRICE_ADD_TO_CART'); ?>"><?php echo JText::_('JBZOO_JBPRICE_ADD_TO_CART'); ?></span></a>
<?php elseif ($mode == 'popup') : ?>
<?php $this->app->jbassets->fancybox();?>
<a rel="nofollow" href="#add-to-cart-modal" class="jsAddToCartModal"
title="<?php echo JText::_('JBZOO_JBPRICE_ADD_TO_CART_MODAL'); ?>"><?php echo JText::_('JBZOO_JBPRICE_ADD_TO_CART'); ?></a>
<?php elseif ($mode == 'oneclick') : ?>
<a rel="nofollow" href="#add-to-cart-goto" class="jsAddToCartGoto"
title="<?php echo JText::_('JBZOO_JBPRICE_ADD_TO_CART_GOTO'); ?>"><?php echo JText::_('JBZOO_JBPRICE_ADD_TO_CART_GOTO'); ?></a>
<?php endif; ?>
<a rel="nofollow" href="#remove-from-cart" class="jsRemoveFromCart remove-button"
title="<?php echo JText::_('JBZOO_JBPRICE_REMOVE_FROM_CART'); ?>"><span data-hover="<?php echo JText::_('JBZOO_JBPRICE_REMOVE_FROM_CART'); ?>"><?php echo JText::_('JBZOO_JBPRICE_REMOVE_FROM_CART'); ?></span></a>
</nav></section> </div>
Я не использовал модальное окно на этом проекте, по-этому его не трогал почти. ВНИМАНИЕ очень важно оставить класс remove-button, для ухода в хайден.
Более подробно в статье тут












