UPDATE: I am currently looking for a way to display text below the button, so that when the button fades away upon hovering, the text is revealed in its place.
Is there a method to position text below (in the z axis) a button created with an anchor element, such that when the button is hovered over, it fades and displays the text below?
I attempted to use positioning and position:absolute to ensure both texts could occupy the same space, but unfortunately, I couldn't get it to work correctly.
Here is a link to my button: http://jsfiddle.net/27bCK/
<div id="pricebar">
<a class="see" href="#">PRICING</a>
</div>
#pricebar {
width:100%;
height:175px;
background-color:#EAE5E5;
text-align:center;
}
#pricebar .see {
color:#fff;
font-size:50px;
line-height:175px;
background-color:#2ecc71;
border:5px solid #2ecc71;
border-radius:5px;
border-left:17px solid #2ecc71;
border-right:17px solid #2ecc71;
transition-duration: .3s;
transition-property: background-color, border, border-left, border-right, opacity;
}
#pricebar .see:hover {
opacity:0;
background-color:#27ae60;
border:5px solid #27ae60;
border-left:17px solid #27ae60;
border-right:17px solid #27ae60;
}
#pricebar .show {
color:#fff;
font-size:50px;
line-height:175px;
background-color:#000;
margin-right:20px;
}