Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 31, 2020 at 1:36 pm #1218181
    mnydish

    Trying to create square buttons with a white outline and white text with no fill color and a hover color to center under text in three column layout

    Like this:
    (hosted on WPengine)

    And here is the Hover:

    June 1, 2020 at 8:37 am #1218364
    Nikko

    Hi mnydish,

    Can you give us a link to the page that shows what you currently have? then we’ll try to supply with some CSS codes that should give that style.

    Best regards,
    Nikko

    June 1, 2020 at 11:33 am #1218408
    mnydish

    Hi Nikko

    Please see this page http://smarttouch.wpengine.com
    Currently I have them set as text inside layout element boxes with a 1pt outline, which looks pretty good.
    Not sure how to add the white hover color like this and on mobile they are very wide so probably not the best solution.

    Thanks
    Mitch

    June 8, 2020 at 2:58 am #1220340
    Mike

    Hi,
    Sorry for the late reply, to give your buttons a white background on hover please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    .flex_column.avia-link-column.avia-link-column-hover:hover {
	background-color: #fff;
}
.flex_column.avia-link-column.avia-link-column-hover:hover > section > div > h4 {
	color:#000 !important;
}

    After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

    June 8, 2020 at 5:32 pm #1220536
    mnydish

    Thanks Mike

    One last question
    The entire hover is white, how do I get the font to match the background
    I tried replacing the 000 with #334a60, but that did not work

    thanks

    June 9, 2020 at 9:23 am #1220782
    Rikard

    Hi,

    Please try this CSS as well:

    .flex_column.avia-link-column.avia-link-column-hover:hover h4 {
    color: #334a60;
}

    Best regards,
    Rikard

    June 9, 2020 at 12:22 pm #1220827
    mnydish

    that worked thank you …except the font hover color appears black
    it there a way to make it the blue: #334a60

    Just tried matching the other code and that seems to work :

    .flex_column.avia-link-column.avia-link-column-hover:hover {
    background-color: #fff;
    }
    .flex_column.avia-link-column.avia-link-column-hover:hover > section > div > h4 {
    color:#000 !important;
    }
    .flex_column.avia-link-column.avia-link-column-hover:hover > section > div > h4 {
    color: #334a60 !important;
    }

    any issue with this
    changed h4 to > section > div > h4 and added !important after the color code

    Thanks!

    June 10, 2020 at 8:07 am #1221081
    Rikard

    Hi,

    Thanks for the update, I can’t see it being black on my end. It’s the same colour as the background of the section; #334a60. Did you get it working? If not then please try loading the page in an incognito or private window to see if that helps.

    Best regards,
    Rikard

    June 10, 2020 at 11:33 am #1221138
    mnydish

    Yes all set… thank you

    June 11, 2020 at 6:58 am #1221541
    Rikard

    Hi,

    Great, I’m glad that you got it working and thanks for the update. I’ll go ahead and close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Button Style’ is closed to new replies.