Elementor - Change Button Text and Colour on Hovering with Simple CSS

This is a simple way to change (in a unique way) the text, colour, or shape of a button when you hover over it.

Code to use if the buttons do not have a transparent colour (add codes onto each button) - see the video.
/*Show Content Initially*/
.elementor-widget-button.oldbutton{
opacity: 1;
}
/*Hide Content on Hover*/
.elementor-widget-button:hover.oldbutton{
opacity: 0;
}
/*Hide Content Initially*/
.elementor-widget-button.newbutton{
opacity: 0;
}
/*Show Content on Hover*/
.elementor-widget-button:hover.newbutton{
opacity: 1;
}


And if you want to have transparent button backgrounds - then add this code to the column custom css, and not the button.
/*Hide Content Initially*/
selector .newbutton2{
opacity: 0;
transition: 0s ease-in-out;
}
/*Show Content on Hover*/
selector:hover .newbutton2{
opacity: 1;
}

/*Show Content Initially*/
selector .oldbutton2{
opacity: 1;
transition: 0s ease-in-out;
}
/*Hide Content on Hover*/
selector:hover .oldbutton2{
opacity: 0;
}



Music used:
Track: Will You Be Mine (Remix)
Free download: https://brokeinsummer.com/will-you-be...
Artists: https://brokeinsummer.com
Contact: https://brokeinsummer.com/help
Music provided by Audio Library Plus

- Get Elementor Pro here --- https://elementor.com/?ref=25741
-- Of course, we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)

-- Book an Appointment/Consultation: https://calendly.com/info-28542
-- LinkedIn:   / imran-siddiq-7320a74a  
-- Instagram:   / batswebsitedesign  
-- Twitter:   / imranwebsites  
-- Facebook:   / websquadrontraining  

PS: https://websquadron.co.uk
PPS: Contact us at [email protected]
PPPS: We only build with Elementor Pro