Стиль кнопки CSS3 без ручного курсора

Question

Я хочу попробовать смоделировать кнопку с HTML5 и CSS3.

Это мой стиль CSS:

.shiny-btn {
    background-color: #CE401C;
    border: thin solid #882D13;
    border-radius: 0.7em 0.7em 0.7em 0.7em;
    box-shadow: 2px 2px 2px #BBBBBB;
    color: #FFFFFF;
    padding: 0.5em;
    text-shadow: 1px 1px 1px #000000;
    width: 15em;
}

А это мой код HTML5:

<a id="spanishButton" class="shiny-btn" onclick="setLanguage('spanish');">Spanish</a>

Почему я не вижу кнопку курсора, если использую тег <a>?

Answer 1

Вам необходимо добавить атрибут href к элементу a:

<a href="#" id="spanishButton" class="shiny-btn" onclick="setLanguage('spanish');return false">Spanish</a>

Тогда вы сможете увидеть курсор pointer по умолчанию для a элементов, что, как я понимаю, вам нужно.

---

Как вы и просили в комментариях, этот сайт работает с этим CSS:

cursor: pointer;

Если вы включите это, вам не понадобится атрибут href.

Answer 2

$cursor:pointer; - поведение по умолчанию для тега <a>.

Если вы хотите, чтобы на странице не отображался указатель, вы должны использовать:

.shiny-btn{
    cursor: default;
}

Answer 3

Если этот элемент используется не как ссылка, а для запуска события или фрагмента JavaScript, рассмотрите возможность использования элемента кнопки.

Чтобы ответить на ваш вопрос,

cursor: pointer;

правильно.