I am currently working on styling a landing page for a Facebook campaign within a WordPress website that is not my own. I want to style the elements of the landing page without affecting the general CSS of the entire website, so I am directly editing the elements within the text editor of the entry itself.
When users click on the link from Facebook, they will be directed to the landing page I'm creating. The primary components of this page are two buttons that will guide users further through the content. I have designed these buttons as squared anchor tags, but in order to enhance usability, I would like the background color to change when the user hovers over them.
Below is the code I used to create the buttons:
<a class="green" style="background-color: #92c03e; display: inline-block;
padding: 10px; margin-right: 20px; color: #ffffff; text-decoration:none;">
Button 1
</a>
<a class="blue" style="background-color: #35a8e0; display: inline-block;
padding: 10px; color: #ffffff; text-decoration: none;">
Button 2
</a>
Normally, if I had a stylesheet, I could simply style the a:hover property with another background color, but since I am customizing individual elements on the page, I am unsure how to apply styles to the :hover state within the style="" attribute.
Is there a way to manipulate the :hover property of an HTML element directly within the HTML code? Alternatively, can a stylesheet be created within the WordPress entry?
I attempted to incorporate the following code into the entry, but it did not produce the desired effect:
<style media="screen" type="text/css">
.green a:hover {background-color: #799f34;}
.blue a:hover {background-color: #2c8cba;}
</style>
If anyone could offer guidance on how to achieve this, I would greatly appreciate it! Thanks!