如何使触摸屏按钮按下？答案

【问题标题】：How can I make a touch screen button press?如何使触摸屏按钮按下？
【发布时间】：2016-10-30 22:08:08
【问题描述】：

Mediaashley 有一个使用 :before 和 :after 的 3D css 按钮，单击鼠标看起来很酷，但我需要一个具有相同效果的触摸屏按钮，而这个按钮似乎不能那样工作。屏幕按下不会像鼠标单击那样给出按钮按下动画。是否有一个简单的调整可以做到这一点？谢谢！

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

【问题讨论】：

改用:focus。

标签： css user-interface button touch touchscreen

【解决方案1】：

方法 1：

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

方法二：

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

方法三：

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

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

希望我能帮到你。

【讨论】：