Css transition/animation on button to move text to top and make it disappear and then show other text where previous text was showing earlier

Question

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

Answer 1

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 class="container">
  <div class="button" id="buttonup">
    <span class="label-up">BUTTON UP</span>
    <span class="label-up">Submitted</span>
  </div>
</div>

<div class="container">
  <div class="button">
    <span class="label-down">BUTTON DOWN</span>
    <span class="label-down">BUTTON DOWN</span>
  </div>
</div>