Button Rollover Effect?

This topic contains 3 replies, has 2 voices, and was last updated by  Sebastian 7 years, 3 months ago.

Author Posts

danmorrow

I am trying to style a submit button for a contact form. How do I change the rollover color, or is that possible?

Thanks!


Sebastian

Hey Dan,

Yes this is possible. You just need to append :hover to the end of any selector to make it’s styles only take effect when the user hovers their mouse over something. For example, if you had the following selector:

#my-selector

You would change it to:

#my-selector:hover

For links, which commonly need a hover state, Microthemer suggest these hover selectors alongside others in the list. The screenshot you posted contained these hover selectors in the list.

selector list

For now, you will need to manually adjust the CSS selector code to append the :hover bit. You can do this by clicking the name of the selector you’re working on in the top toolbar. This will reveal the selector editing options where you can append :hover to whatever you see in the textarea.

Once we’ve rolled out the new interface improvements discussed here, we will make some significant improvements to the selector wizard so that manually updating selectors isn’t necessary in this circumstance.

I hope that helps, please let me know if you get stuck.
Cheers,
Sebastian


danmorrow

Excellent! Thanks again! I am just glad to know its possible. To be honest, I am so new to all this coding stuff that the terminology and other basics are throwing me. I’ll get there!

I’m glad I found you guy! And before you went annual-subscription on me. : ) I have tried a couple of plugins that try to do the same things, but yours is my favorite so far.

Thanks!


Sebastian

You’re welcome Dan. Good to know that you’re liking Microthemer 🙂
Cheers,
Sebastian

You must login or register to reply to this topic.