CODEWITHSUNDEEP
javascripthtmlcss
Apost
Apost

Reputation: 39

How to not apply animation on button's text while onClick?

I have a button which flips when the user click it. The problem is that I don't want the text to flip with the button. (I use js to apply a little bit of css when the user click the button) 

function clickFunction() {
  var change = document.getElementById("btn");
  if (change.innerText == "Send")
  {
    change.innerText = "Sent!";
    change.style.border = "4px solid #fff";
    change.style.background = "#00E676";
    change.style.animation = "anim 1s";
  }
}
button {
  font-family: 'Nunito', sans-serif;
  font-weight: bold;
  font-size: 40px;
  color: #fff;
  background: #01579B;
  border: 4px solid #01579B;
  border-radius: 100px;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
}

@keyframes anim {
  0% {}
  100% { transform: rotateX(180deg)}
}
<body>
  <button id="btn" onclick="clickFunction()" type="button">Send</button>
  <script src="click.js"></script>
</body>

Upvotes: 0

Views: 70

Answers (2)

Apost
Apost

Reputation: 39

What I did was add a div before the button just like @cagcoach said and then i added the onClick function on it and removed it from the button. After that I removed the text from the button and added it inside the div. Then made a variable on the js file for that div and made it so that the text inside the div would change on click and not the button's text and finally added the animation (called anim) on the div too.

TLDR; correct snippets

function clickFunction() {
  var butn = document.getElementById("btn");
  var divi = document.getElementById("div");
  if (divi.innerText == "Send")
  {
    divi.innerText = "Sent!";
    divi.style.animation = "anim 1.5s";
    butn.style.border = "4px solid #fff";
    butn.style.background = "#00E676";
    butn.style.animation = "anim 1.5s";
  }
}
@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>

Upvotes: 0

cagcoach
cagcoach

Reputation: 679

The simplest way might be, to put a div behind the button.

The button itself then only gets the text, and click changes the divs background.

So you would have something like:

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

Upvotes: 1

Related Questions