Switching Out Link Text On Hover - Transition

Looking for a simple solution to replacing text on a link on :Hover. I want a slight transition (text comes up from underneath) and just replace regular if java is turned off. HTML

Solution 1:

Try utilizing :after pseudo element

.bot-text a  {
  font: 600 15px/20px 'Open Sans', sans-serif;
  color: #383737;
  position: relative;
  display: inline-block;
  border: 2px solid #383737;
  padding: 25px;
  margin: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.bot-text a:hover {
  color:transparent;
}

.bot-text a:hover:after {
  opacity:0;
  position:absolute;
  left:40%;
  color:blue !important;
  content:"abc";
  animation: slideup 1s ease-in 0s forwards;
  -moz-animation: slideup 1s ease-in 0s forwards;
  -webkit-animation: slideup 1s ease-in 0s forwards;
}

@keyframes slideup {
  from {
    top:50px;
  }
  to {
    top:25px;
    opacity:1;
  }
}

@-moz-keyframes slideup {
  from {
    top:50px;
  }
  to {
    top:25px;
    opacity:1;
  }
}

@-webkit-keyframes slideup {
  from {
    top:50px;
  }
  to {
    top:25px;
    opacity:1;
  }
}

<div class="bot-text">
  <a href="">Go here</a>
  <a href="">Or go here</a>
</div>