Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #230277

    like seen at this site, with the 3 large circle buttons.

    http://www.willowcreekcarecenter.org

    i want to make the button/word donate (red button, far right), jump/move up a little on mouseover (what the client wants) on our site, at:

    http://www.terriblemeek.com/HOL-WP/

    thx

    #230283

    Hey HOLM2014!

    Please add following code to Quick CSS as well for hover state and adjust as needed

    #menu-item-824 > a:hover {
    background: orange;
    color: black;
    margin-top: -16px;
    }

    Cheers!
    Yigit

    • This reply was modified 5 months, 3 weeks ago by  Yigit.
    #230300

    thanks Yigit, that works like a charm for mouse over color change.

    they requested that it also bump/move up a little on mouseover like the 3 large circle buttons here:

    http://www.willowcreekcarecenter.org

    any css magic for that?

    you have been a great help! thanks Yigit!

    #230307

    Hi!

    Please add following code to Quick CSS as well

    #menu-item-824 > a { transition: all .2s;
    -o-transition: all .2s;
    -moz-transition: all .2s;
    -webkit-transition: all .2s; }
    
    #menu-item-824 > a:hover {
    margin-top: -16px;
    transition: all .2s;
    -o-transition: all .2s;
    -moz-transition: all .2s;
    -webkit-transition: all .2s;
    }

    Best regards,
    Yigit

    #230339

    that is what they wanted, many thanks!

    thank you!!!!!

    not to push, but how would i use this same Dontate button, that is in the top left, as the 3 buttons down below, the ones that also presently say donate? any copy/paste of code i could do to make that happen, so the buttons not only look the same but also behave the same with the color change on mouseover and the bump up change?

    thanks!!!!!!

    #230347

    Hi!

    Currently it is not possible, because you have used images for buttons. Please add them using HTML anchor tag http://www.w3schools.com/tags/tag_a.asp and give them the same class such as
    a class="donate-buttons" href="link goes here"
    Then you can add following code to Quick CSS

    .donate-buttons { background-color: red;
    color: white; 
     transition: all .2s;
    -o-transition: all .2s;
    -moz-transition: all .2s;
    -webkit-transition: all .2s; }
    .donate-buttons:hover { background-color: blue;
    color: white; 
     transition: all .2s;
    -o-transition: all .2s;
    -moz-transition: all .2s;
    -webkit-transition: all .2s; 
    margin-top: -5px; }

    Regards,
    Yigit

    #248883

    Holy cow, Batman! You closed my topic before I even had a chance to try it. So I post here.

    Spent some time researching and found SpritePad and added my two “LearnMore” images. It then created the CSS to switch the images. I added this to my Custom CSS on the image layer –

    .learn_more_on{
    background-position: -45px -193px;
    width: 172px;
    height: 42px;
    }
    .learn_more{
    background-position: -48px -147px;
    width: 170px;
    height: 41px;
    }
    

    but nothing happened. What am I doing wrong?

    #250063

    Hey!

    It seems the background-url property is missing, it should be:

    .learn_more_on{
    background-url: _IMAGE_URL;
    background-position: -45px -193px;
    width: 172px;
    height: 42px;
    }
    .learn_more{
    background-url: _IMAGE_URL;
    background-position: -48px -147px;
    width: 170px;
    height: 41px;
    }

    Regards,
    Josue

    #250204

    I think this is the syntax -

    .learn_more_on{
    background-image:url('/prism_wordpress/wp-content/uploads/2014/03/learn_more-120x41.png');
    background-position: -45px -193px;
    width: 172px;
    height: 42px;
    }
    .learn_more{
    background-image:url('/prism_wordpress/wp-content/uploads/2014/03/learn_more_on-120x42.png');
    background-position: -48px -147px;
    width: 170px;
    height: 41px;
    }
    

    Not that it matters because it doesn’t work. When I look at the source code (Wow! There’s a LOT of code) I can find the two Learn More images in the two other sections, but I can’t find any custom CSS for the first section. Feel free to login and try your hand at it.

    Cheers!

    #250353

    Hey!

    Where in your website are you trying to put these buttons?

    Cheers!
    Josue

    #250368

    http://www.prismcareernetworks.com/prism_wordpress/

    You’ll see there’s no button in the first drop down. That’s the one with the custom css.

    #250446

    Hi!

    First of all the image button doesn’t have the learn_more class selector and it’s not enclose on a link tag:

    <img class="ls-l ls-preloaded" style="top: 407.39799999999997px; left: 667.3053333333334px; white-space: nowrap; width: 152.88666666666666px; height: 36.87266666666667px; padding: 0px; border-width: 0px; margin-left: 0px; margin-top: 0px; -webkit-transform-origin: 50% 50% 0px; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1); opacity: 1; visibility: visible;" data-ls="delayin:8000;fadeout:false;" src="http://www.prismcareernetworks.com/prism_wordpress/wp-content/uploads/2014/03/learn_more.png" data-src="http://www.prismcareernetworks.com/prism_wordpress/wp-content/uploads/2014/03/learn_more.png" alt="">
    

    If I am not mistaken, the css should be like this:

    .learn_more_on:hover {
    background-image:url('/prism_wordpress/wp-content/uploads/2014/03/learn_more_on-120x42.png');
    background-position: -48px -147px;
    width: 170px;
    height: 41px;
    }

    Regards,
    Ismael

    #250515

    lol. To quote a famous Moderator, who goes by the name Ismael, “You can’t simply add a rollover effects without using css or jquery.”

    After two hours of messing with the code you suggested and getting nowhere except very frustrated, I thought, what the hell, I’ll give the standard HTML mouseover effect a shot. Here’s the HTML –

    `<img src=”/prism_wordpress/wp-content/uploads/2014/03/learn_more.png”
    onmouseover=”src=’/prism_wordpress/wp-content/uploads/2014/03/learn_more_on.png’”
    onmouseout=”src=’/prism_wordpress/wp-content/uploads/2014/03/learn_more.png’”>

    It worked PERFECTLY! Not only did it solve this issue, but now I know I can use standard mouseover effects anywhere. Cool!

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘how can i make a button move on mouseover, to hover, like this sample site’ is closed to new replies.