我怎样才能按下触摸屏按钮

Question

Mediaashley有一个3D css按钮，使用：before和：after，点击鼠标看起来很酷，但我需要一个具有相同效果的触摸屏按钮，而这个似乎不起作用。屏幕按压不会像鼠标单击那样提供按钮按压动画。有没有一个简单的调整可以让它做到这一点？谢谢

HTML

<p>Click to activate.</p>
<p>&nbsp</p>
<p>
<button class="facebook"></button>
<button class="twitter"></button>
<button class="in"></button>
<button class="vimeo"></button>
</p>

CSS

@font-face {
    font-family: 'socialfont';
    src: url('http://mediaashley.com/MyFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body {
  background: #ddd;
  width: 100%;
  margin: 70px;
}
button {
  width:100px;
  height:100px;
  display:inline-block;
  font-family:Arial, "Helvetica", sans-serif;
  font-size:16px;
  font-weight:bold;
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  text-align:center;
  text-shadow:1px 1px 0px #07526e;
  padding-top:6px;
  margin-left:auto;
  margin-right:auto;
  left:30px;
  position:relative;
  cursor:pointer;
  border: none;
  background: #109bce;
  background-image: linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);
  border-radius: 5px;
  box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;
}
button:active {
  top:3px;
  box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;
}
button:before {
  font-family: 'socialfont';
  font-size: 50px;
  line-height: 1em;
  font-weight: normal;
  color: #fff;
  content:"F020";
  width:85px;
  height:90px;
  display:block;
  position:absolute;
  padding-top:10px;
  top:10px;
  text-shadow: 1px 1px 2px #07526e;
}
button:active:before {
  top: 7px;
  font-size: 50px;
  text-shadow: 0px 3px 0px #07526e, 0px 5px 1px #07526e/*, 3px 0px 1px #07526e, 3px 3px 1px #07526e,
     -2px 0px 1px #68cff2*/;
}
.twitter:before {
  content:"F021";
}
.in:before {
  content:"F022";
}
.vimeo:before{
  content:"F024";
}

http://codepen.io/mediaashley/pen/kLbGf

Answer 1

方法1:

将按钮放入<div></div>中，如下所示：<div ontouchstart=""></div>

方法2:

尝试<button ontouchstart=""></button>

方法3：

您可以尝试使用JavaScript:更改按钮的CSS类

document.getElementById(id).ontouchstart = function (event) {
    ...
}

希望我能帮助你。