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

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

CSS

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

This creates a text button with a border and padding. on hover I want the text to change to something else (will always be less text). I want the text to replace the current link text with a slide up from the bottom on hover.


Source: css3

Leave a Reply