How to not apply animation on button's text while onClick?
Question
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>
2 answers
solution1
1 ACCPTED 2018-05-13 11:17:48
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";
}
}
solution2
0 2018-05-13 11:47:08
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.