css - PureCSS 按钮 href 链接不起作用

Question

我正在使用 purecss 创建彩色按钮，href 不可点击且无法正常工作。该按钮看起来很好，只是导致问题的链接。

<button class='pure-u-1 pure-button pure-button-primary pure-u-md-2-5 button-xlarge' href='#' >Find out more details</button>

我无法点击按钮。为什么这不起作用？

这个按钮很大，看起来像这样。请问我该如何解决这个问题？

我的按钮 CSS 是这样的:

/*
 * -- PURE BUTTON STYLES --
 * I want my pure-button elements to look a little different
 */
.pure-button {
    background-color: #1f8dd6;
    color: white;
    padding: 0.5em 2em;
    border-radius: 5px;
}

a.pure-button-primary {
    background: white;
    color: #1f8dd6;
    border-radius: 5px;
    font-size: 120%;
}

    .button-xsmall {
            font-size: 0.5vw;
        }

        .button-small {
            font-size: 1vw%;
        }

        .button-large {
            font-size: 2vw%;
        }

        .button-xlarge {
            font-size: 2.5vw;
        }

  .button-success,
        .button-error,
        .button-warning,
        .button-secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }

        .button-success {
            background: rgb(28, 184, 65); /* this is a green */
        }

        .button-error {
            background: rgb(202, 60, 60); /* this is a maroon */
        }

        .button-warning {
            background: rgb(223, 117, 20); /* this is an orange */
        }

        .button-secondary {
            background: rgb(66, 184, 221); /* this is a light blue */
        }

Answer 1

href 只是'#'，它是HTML 中 anchor 标记的空白占位符。最简单的解决方案是将按钮包装在 <a> 中标签。例如:

<a href="http://www.google.com">
    <button class='my-class'>Find out more details!</button>
</a>