Кнопка CSS некорректно отображается

Question

Я пытаюсь получить стиль кнопок «Добавить в корзину» и «Оформить заказ» на этой странице: http://liff2013.com/product-passes/voodoo-package.html будет такой же, как на этой странице: http://liff2013.com/workshops.

Не щелкали, кнопки в основном одинаковы, однако, когда вы нажимаете кнопку (и удерживаете), стиль меняется. Любые идеи, почему и как их исправить?

Спасибо!

Answer 1

Кнопка, которая выглядит хорошо:

<button onclick="setLocation('http://liff2013.com//checkout/cart/add?product=13&amp;qty=1')" class="addToCart">Add To Cart</button> 

Кнопка, которая выглядит не очень хорошо:

<button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit(this)"> 
    <span> 
     <span>Add to Cart</span> 
    </span> 
</button> 

Я думаю, вы должны проверить, как он выглядит без span или с общим классом.

Answer 2

Сравните стили, которые Вы получаете от .addToCart с .button, .btn-cart и button

Answer 3

Ознакомьтесь с FireBug или Chrome dev tools. Это позволит легко проверить, что на самом деле применяется стилизация.

Проблема здесь вы стилизации внутренний span элемент, а не самой кнопки в одном экземпляре, поэтому при применении :active псевдо-класс, который вы видите врезке границы пинок. Ваш лучший выбор, если вы хотите, чтобы обе эти кнопки чтобы выглядеть одинаково, нужно определить один, повторно используемый класс CSS и применить его к обоим, с той же разметкой HTML.

Answer 4

Вы должны добавить один и тот же класс, как это:

Хороший Lookin' Код кнопки:

<button onclick="setLocation('BLAH')" class="addToCart"> 
    Add To Cart 
</button> 

Bad Ищешь код кнопки:

<button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit(this)"> 
<span><span>Add to Cart</span></span> 
</button> 

Исправление:

<button type="button" title="Add to Cart" class="addToCart " onclick="BLAH"> 
    Add to Cart 
</button> 

S Это разница?

Answer 5

Пограничный вопрос происходя потому, что у вас есть свойство CSS определено для

button.button { 
    border: 2px outset buttonface !important; 
} 

который переопределяя границы врезку по умолчанию при нажатии на кнопку (: активный).

Другие люди уже обратились к проблеме с шрифтом.