How to add on hover effect to my custom CSS background button? (code included partially)

Support
#1

So on my website (EasyStartUp.net) you see I use this code on some buttons in the custom CSS area:

$el { background-image: linear-gradient(to bottom right, #11b1ef, #5951d8, #573975);}

I would like to have the effect where when you mouse over that button the background changes to transparent with a 2px solid border in the color of #5852da

I tried playing with it by searching online a bit but couldn’t quite figure it out. Thanks in advance guys. You are truly the best. I send all my new clients here to buy the Pro theme.

#2

Hello @WillWashington,

Thanks for writing in!

To include a hover background image effect, you may need to update your code into this:

 $el.x-anchor-button { 
  background-image: linear-gradient(to bottom right, #11b1ef, #5951d8, #573975);
}

 $el.x-anchor-button:hover { 
  background-image: none;
  background-color: transparent;
}

And for the border, find the border option in the button element settings.

We would loved to know if this has work for you. Thank you.

1 Like
#3

That worked out perfect! Thank you and you helped me to apply this same kind of styling to other areas!

While I have your attention to my website I have another question regarding the menu bar at the top:

I would like the background in the initial position to be transparent as it is currently only at the top position and then once you scroll how it becomes visible again (after a short delay) I would like to add a background color to it when it re-appears a solid color, for example #5852da

Thanks again! making huge progress today on the website

Header fade in on scroll?
#4

Hello @WillWashington,

To resolve your header issue, please edit your header and in the bar settings, find the “Customize” tab. You will then add this inline element css:

$el.x-bar-fixed {
  background-color: #5852da;
}

Please let us know if this works out for you.

1 Like
#5

Worked perfect, thank you so much guys…

#6

You’re welcome!
Thanks for letting us know that it has worked for you.

1 Like
#7

Hey Guys I have one more question related to this piece of code:

$el.x-bar-fixed {
background-color: #xxx
}

for example the logo I have in my menu bar (for example) is called logo1.png is it possible to when the $el,x-bar-fixed becomes active to also change out ‘logo1.png’ for ‘logo2.png’?

I also want to add a mild drop shadow effect from the bar its self in #000000 with a 0.25 opacity but only during the x-bar-fixed activation.

How would I achieve this? Thanks again for everything.

Just a guess – tell me if I was right… I have to give the ‘logo’ field in the header builder a class and then define that class with the bar fixed somehow? haha I dunno but you guys are teaching me so much a few months ago I had no idea about the custom css stuff really.

#8

Hi,

Yes, that’s correct. Add two image element(your logos) then add a unique class to each image element.

Then you can add this css in Header > CSS. Assuming you have added logo1 and logo2 classes

.logo2 {
     display:none;
}

.x-bar-fixed .logo1 {
     display:none;
}

.x-bar-fixed .logo2 {
     display:block;
}

Hope that helps

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.