[Resolved] Sliding button (change other button when I hover) – similar to toggle

Home Forums Support Sliding button (change other button when I hover) – similar to toggle

  • This topic has 7 replies, 2 voices, and was last updated 2 months ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1376370
    Joey

    I have two buttons. Normally the “buy” button is always white background, to give emphasis. Here is what it currently does (https://simipress.com/toggle/):

    Is there a way to make the “buy” button turn black when I hover over “read” so it isn’t confusing to have two white buttons? It’s not really a toggle, as both buttons are linked to another page.

    Just in case, this is my current CSS. .button.ghost is the “read” button:

    .button.ghost, .button.ghost:visited {   
    	color:white;
        background: transparent;     
        border: 1px solid #FFF; 
    } 
    .button.ghost:hover, 
    .button.ghost:active {     
        background: #FFFFFF;     
        color: #222222;     
        border: 1px solid transparent; 
    }
    
    .button.buy, .button.buy:visited {     
        background: #FFFFFF;     
        color: #222222;     
        border: 1px solid transparent; 
    }
    
    .button.buy:hover, 
    .button.buy:active {    
     color: #fff;  
        background: transparent;  
    
        border: 1px solid #FFF; 
    } 

    Thank you.

    #1376938
    David
    Staff
    Customer Support

    Hi there,

    hmmm…. try editing your HTML to include a button-wrap <div> around your 2 x buttons eg,:

    <article class="box buy">
        <div class="button-wrap">
            <a class="button buy" href=....>Buy</a><a class="button ghost" href=.....>Read</a>
        </div>
        <!-- rest of HTM Here -->
    </article>

    Then maybe this CSS:

    .button-wrap:hover .button.buy
     {    
        color: #fff !important;  
        background: transparent;  
        border: 1px solid #FFF;
    }
    #1377291
    Joey

    That works, but if I hover anywhere to the right of those two buttons it also triggers the button-wrap and turns the buy button black (when I’m not hovering over any button).

    I had a mistake in my code, I want to keep the buy button always white, even on hover, like so:

    .button.buy, .button.buy:visited, .button.buy:hover {     
        background: #FFFFFF;     
        color: #222222;     
        border: 1px solid transparent; 
    }

    The button wrap overrides this CSS. Is there a way to keep the button background white at all times except when I hover over “read”? Thank you for your help.

    #1377553
    David
    Staff
    Customer Support

    Lets try a different CSS method.
    Remove the CSS i provided so the buttons now function as normal on hover.
    And in your HTML swap the two buttons – so the Read comes before Buy.
    Then let me know so i can work out the toggle CSS and make it so the Buy and Read are in the correct order on the frontend….

    #1378517
    Joey

    Okay, here is the current CSS:

    .button.ghost, .button.ghost:visited {   
    	color:white;
        background: transparent;     
        border: 1px solid #FFF; 
    } 
    .button.ghost:hover, .button.ghost:active {     
        background: #FFFFFF;     
        color: #222222;     
        border: 1px solid transparent; 
    }
    
    .button.buy, .button.buy:visited, .button.buy:hover, .button.buy:active {     
        background: #FFFFFF;     
        color: #222222;     
        border: 1px solid transparent; 
    }

    I also switched the order of the buttons so that the HTML is like so:

    <article class="box buy">
    <div class="button-wrap">
    <a class="button ghost" href="">Read</a><a class="button buy" href="">Buy</a></div>
    <p></p> 
    <h3>Paperback $6.99</h3> 
    <h3>Ebook $2.99</h3> 
    </article>

    Should I remove the button-wrap?

    #1378858
    David
    Staff
    Customer Support

    Keep the button-wrap and add this below your current CSS:

    .button.ghost:hover+.button.buy {
        background-color: #000 !important;
        color: #fff;
    }
    
    .button-wrap {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
    #1379781
    Joey

    That is cool, thank you so much. Flex is pretty cool, I would never have figured that out. I made background color transparent instead of #000 because the box it’s sitting on isn’t quite black. It also works fine without !important for some reason, do I need to leave it on?

    Thanks again David, you’ve been a lot of help.

    #1379850
    David
    Staff
    Customer Support

    if its working then !important is not required.
    Yeah Flex won the day here, as you can only use the hover event of one element to style an element immediately after it using only CSS.

    You’re welcome – glad to be of help

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.