html - CSS 'button' 不必要地允许文本选择

Question

这应该很容易。创建样式化的 css 无框架“按钮”，由 http://www.cssbuttongenerator.com/ 提供，按钮在我的代码和 jsfiddle of it 中的行为不同- 将文本悬停在按钮内时，鼠标图标会发生变化，用户可以选择该文本。如何避免这种情况？

CSS:

  .simpleButton {

    -moz-box-shadow:inset 0px 1px 0px 0px #cae3fc;
    -webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc;
    box-shadow:inset 0px 1px 0px 0px #cae3fc;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) );
    background:-moz-linear-gradient( center top, #79bbff 5%, #4197ee 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee');
    background-color:#79bbff;
    -webkit-border-top-left-radius:13px;
    -moz-border-radius-topleft:13px;
    border-top-left-radius:13px;
    -webkit-border-top-right-radius:13px;
    -moz-border-radius-topright:13px;
    border-top-right-radius:13px;
    -webkit-border-bottom-right-radius:13px;
    -moz-border-radius-bottomright:13px;
    border-bottom-right-radius:13px;
    -webkit-border-bottom-left-radius:13px;
    -moz-border-radius-bottomleft:13px;
    border-bottom-left-radius:13px;
    text-indent:0;
    border:1px solid #469df5;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:normal;
    font-style:normal;
    height:45px;
    line-height:45px;
    width:133px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #287ace;
  }
  .simpleButton:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4197ee), color-stop(1, #79bbff) );
    background:-moz-linear-gradient( center top, #4197ee 5%, #79bbff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4197ee', endColorstr='#79bbff');
    background-color:#4197ee;
  }
 .simpleButton:active {
    position:relative;
    top:1px;
  }

Answer 1

你可以使用 user-select: none;防止文本被选中:

.simpleButton {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    /* other styles... */
}

Working Demo .

请注意，这是一项实验性(非标准)功能，需要供应商前缀。