Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Ease a Button

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #194154
    Erik
    Participant

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

    #194155
    Senff
    Participant

    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.

    #194156
    Erik
    Participant

    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

    #194157
    Paulie_D
    Member

    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’.

    #194164
    Erik
    Participant

    Figured it out thanks for the help

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.