CODEWITHSUNDEEP
htmlcss
matanox
matanox

Reputation: 13747

CSS 'button' needlessly allows text selection

This should be easy. Creating a styled css no-framework 'button' courtesy of http://www.cssbuttongenerator.com/, the button behaves differently in my code and in a jsfiddle of it - the mouse icon changes when hovering the text within the button and that text can be selected by the user. How would that be avoided?

The 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;
  }

Upvotes: 1

Views: 92

Answers (3)

user1253034
user1253034

Reputation:

You want the "default" cursor:

cursor:default;

And this is one way to disable highlighting (https://stackoverflow.com/a/4407335/1253034)

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Upvotes: 2

user3290988
user3290988

Reputation:

Use the cursor property. 

.simpleButton { cursor: pointer }

Upvotes: 0

Hashem Qolami
Hashem Qolami

Reputation: 99564

You could use user-select: none; to prevent the text from being selected:

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

Working Demo.

Note that this is an experimental (none-standard) feature needs the vendor prefixes.

Upvotes: 4

Related Questions