Css transition/animation on button to move text to top and make it disappear and then show other tex-CodePudding

I need to create a button with Submit text. When user clicks on it submit text should transition to top and as it touch button edges it should disappear and other text named Submitted should transition from bottom and show at same place where Submit text was showing. I have tried couple of ways but having issue in achieving this functionality

Css is:

.container {
  width:100%;
  text-align:center;
  margin:30px 0;
  font-family:sans-serif;
}

.button {
  display:inline-block;
  height:60px;
  line-height:60px;
  
  position:relative;
  text-align:center;
  background-color:#16a756;
  color:white;
  border-radius:2px;
  transition:0.3s;
}

.button:hover {background:#19c664;}

/* BUTTON UP */
.label-up {
  display:block;
  margin:0px 30px;
  height:100%;
  position:relative;
  top:0%;
  transition:0.3s;
}

.sb {
  color: red;
  visibility: hidden;
}

.button:hover .label-up {
  top:-100%;
}

.button:hover .sb {
  position: relative;
  transition:0.3s;
  top: -70px;
}

Below is the codepen link. I tried to achieve this on button hover, click event I can manage

https://codepen.io/samuelbeard/pen/kWVrZv

CodePudding user response：

You can do it by a little bit of javascript.

I have added functionality to button up. You can do the same for button-down.

Codepen: https://codepen.io/uiexpo/pen/jOZwmZG

What changed?

added id to the button
in CSS, instead of :hover used class to change state

document.getElementById("buttonup").addEventListener("click", function() {
  this.classList.add('move-label-up')
})

.container {
  width:100%;
  text-align:center;
  margin:30px 0;
  font-family:sans-serif;
}

.button {
  display:inline-block;
  height:60px;
  line-height:60px;
  overflow:hidden;
  position:relative;
  text-align:center;
  background-color:#16a756;
  color:white;
  border-radius:2px;
  transition:0.3s;
}

.button:hover {background:#19c664;}

/* BUTTON UP */
.label-up {
  display:block;
  margin:0px 30px;
  height:100%;
  position:relative;
  top:0%;
  transition:0.3s;
}

.button.move-label-up .label-up {
  top:-100%;
}

/* BUTTON DOWN */
.label-down {
  display:block;
  margin:0px 30px;
  height:100%;
  position:relative;
  top:-100%;
  transition:0.3s;
}

.button:hover .label-down {
  top:0%;
}

<div >
  <div  id="buttonup">
    <span >BUTTON UP</span>
    <span >Submitted</span>
  </div>
</div>

<div >
  <div >
    <span >BUTTON DOWN</span>
    <span >BUTTON DOWN</span>
  </div>
</div>