Question

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

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：

将您的按钮放入package ibm; import java.io.Serializable; import java.util.ArrayList; import java.util.HashMap; import Teste.Watson; import java.util.Map; public class Cognitive implements Serializable{ static public String Translate(ArrayList lista){ LanguageTranslation service = new LanguageTranslation(); service.setUsernameAndPassword(lista.get(0).toString(), lista.get(1).toString()); TranslationResult translationResult = service.translate(lista.get(2).toString(), Language.ENGLISH, Language.SPANISH).execute(); return lista.get(0).toString(); } }，如下所示：<div></div>

方法2：

试试<div ontouchstart=""></div>

方法3：

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

<button ontouchstart=""></button>

希望我能帮助你。

如何按下触摸屏按钮？

1 个答案: