没有手形光标的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;

是对的。