- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
OK, so I have two buttons and only differance is the background different color.
I want the button to ease to the other button image but it wont ease it just switches to the other.
What should I add or remove?
HTML
<a href="http://www.URL.com" id="BookBtn"></a>
CSS
#BookBtn {
width: 267px;
height: 82px;
margin-left: auto;
margin-right: auto;
display: block;
background: url("imageURL") no-repeat scroll center top transparent;
}
#BookBtn:hover {
background: url("imageURL2") no-repeat scroll center top transparent;
}
With plain CSS, you can’t ease from one background image to the other.
The simplest thing I can think of, is to have 2 buttons, placed on top of eachother, with the one on top fading out when you hover.
I tried to do a cross fade but the both images still were visible till I hovered them then one faded out.
Link: Link For What I Tried
Firstly a link is not a button but this looks like a reasonable place to use a pseudo element like Senff suggested rather than ‘two buttons’.
Figured it out thanks for the help