Niedziałający przyciski CSS HTML

Question

Witajcie,

Mam problem z ustawieniem hover i active na buttonie. Łapie mi tylko górną krawędź przycisku, reszta nie reaguje na najechanie kursorem. Już mi brakuje pomysłów na rozwiązanie tego problemu.

<ul>
  <li class="col-xs"><a class="btn" href="#">Zaloguj się</a></li>
  <li class="col-xs line-menu-login"><a class="btn" href="#">Dołącz</a></li>
</ul>

.btn {
    padding: 15px 25px;
    display: inline-block;
    border: 1px solid rgba(0,0,0,0.21);
    border-bottom-color: rgba(0,0,0,0.34);
    text-shadow:0 1px 0 rgba(0,0,0,0.15);
    box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset,
    0 2px 0 -1px rgba(0,0,0,0.13),
    0 3px 0 -1px rgba(0,0,0,0.08),
    0 3px 13px -1px rgba(0,0,0,0.21);
    box-sizing: border-box;

}
.btn:hover {
    cursor: pointer;
    background-color: #ffffff;
}
.btn:active {
    box-shadow: 0 1px 0 rgba(3, 49, 49, 0.88),0 1px rgba(0,0,0,0.05) inset;
    position: relative;
}

Dzięki za pomoc.

Comments

U mnie wszystko działa jak należy. Z jakiej przeglądarki i jej wersji korzystasz?

---

Z dwóch: firefox i chrome. Wersje aktualne.

Korzystam także z github.com/necolas/normalize.css, może to mi miesza.

Answer 1

Pewnie jest przykryta przez inny (niewidzialny) element. Najedź na przycisk w miejscu gdzie nie reaguje i zbadaj element. Możliwe, że pokaże Ci jaki element przykrywa przycisk. Jeżeli nie, daj więcej kodu :)

Comments

BINGO! Dziękuje, faktycznie był zasłonięty.