Question

我有一个按钮，当用户点击它时会翻转。问题是我不希望文本按下按钮。（当用户点击按钮时，我使用js来应用一点css）

<body>
  <button id="btn" onclick="clickFunction()" type="button">Send</button>
  <script src="click.js"></script>
</body>

$ sudo apt-get install libxml2-dev

{{1}}

Answer 1

最简单的方法是将div放在按钮后面。

然后按钮本身只获取文本，然后单击更改div背景。

所以你会有类似的东西：

<body>
  <div class="btn">
    <div id="bg-button" class="bg-button"></div>
    <button id="btn" onclick="clickFunction()" type="button">Send</button>
  </div>
  <script src="click.js"></script>
</body>

的CSS：

.btn{
  position: relative;
  height:80px;
  overflow:hidden;
}

button {
  font-family: 'Nunito', sans-serif;
  font-weight: bold;
  font-size: 40px;
  background-color:rgba(0, 0, 0, 0);
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
  position: absolute;
  border: none;
  top:0;
  color: #fff;
  width: 100%;
  height:100%;

}

.bg-button {
  background: #01579B;
  border-radius: 100px;
  top:0;
  width: 100%;
  height: 100%;

}

@keyframes anim {
  0% {}
  100% { transform: rotateX(180deg)}
}

JS：

function clickFunction() {
  var change = document.getElementById("btn");
  var bg = document.getElementById("bg-button");
  if (change.innerText == "Send")
  {
    change.innerText = "Sent!";
    bg.style.background = "#00E676";
    bg.style.animation = "anim 1s";
  }
}

Answer 2

我所做的是在按钮之前添加一个div，就像@cagcoach所说，然后我在其上添加了onClick功能并将其从按钮中删除。之后我从按钮中删除了文本并将其添加到div中。然后在该div的js文件上创建一个变量，使得div中的文本在点击时不会改变，而不是按钮的文本，最后在div上添加了动画（称为anim）。

TLDR; 正确的代码段

@keyframes anim {
  0%{transform: rotateX(0deg)}
  50%{transform: rotateX(180deg)}
  100%{transform: rotateX(0deg)}
}

body {background: #0091EA;}

button {
  background: #01579B;
  border: 4px solid #01579B;
  border-radius: 100px;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 160px;
  height: 70px;
  z-index: 0;
}

div#div {
  position: absolute;
  left: 30px;
  right: 0;
  top: 17px;
  font-family: 'Nunito', sans-serif;
  font-weight: bold;
  font-size: 40px;
  color: #fff;
  z-index: 1;
}

<body>
  <div onclick="clickFunction()" id="div">Send</div>       
  <button id="btn" type="button"></button>
  <script src="click.js"></script>
</body>

{{1}}

如何在onClick时不在按钮的文本上应用动画？

2 个答案: