Button Rollover Effect?

Author Posts

danmorrow June 13, 2015 at 2:19 am

Heads up! this post was created when Microthemer was at version 3. The current version is 7. Some references to the interface may be out of date.

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 June 14, 2015 at 2:43 am

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 June 14, 2015 at 2:47 am

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 June 14, 2015 at 3:25 am

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

You must login or register to reply to this topic.