Geek Answers Handbook

Custom css for single entry in wordpress

I am creating a landing page for a facebook campaign on a Wordpress website. This is not my own website, and I don’t want to change the general CSS for the entire website when I set up the landing page. Therefore, I put all the elements of my record directly in a text editor for this record, if that makes sense.

When people click the facebook link, they get to the page I am doing. Basically, the page should consist of two buttons that redirect people further to the page. I created two anchor tags, for example, square buttons, and are still so good, but in order to really get a “clickable” feel, I want the background to change when the tag freezes.

This is how I created the buttons:

<a class="green" style="background-color: #92c03e; display: inline-block;
padding: 100px; margin-right: 20px; color: #ffffff; text-decoration:none;">
Button 1
</a>

<a class="blue" style="background-color: #35a8e0; display: inline-block; 
padding: 100px; color: #ffffff; text-decoration: none;">
Button 2
</a>

, a:hover , , , , :hover style="".

:hover html html? wordpress?

, :

<style media="screen" type="text/css">
.green a:hover {background-color: #799f34;}
.blue a:hover {background-color: #2c8cba;}
</style>

- ? Thanx!

+4
2

! , CSS backgroound- HTML.

a:hover.green  {background-color: #799f34!important;}
a:hover.blue {background-color: #2c8cba!important;}

OP HTML, CSS, , : exaple one

+3

, block/ div, . , .

#land-pg .green:hover {background-color: #799f34 !important;}
#land-pg .blue:hover {background-color: #2c8cba !important;}
<div id="land-pg">

<a class="green" style="background-color: #92c03e; display: inline-block;
padding: 100px; margin-right: 20px; color: #ffffff; text-decoration:none;">
Button 1
</a>

<a class="blue" style="background-color: #35a8e0; display: inline-block; 
padding: 100px; color: #ffffff; text-decoration: none;">
Button 2
</a>

</div>
ANOTHER SAME DIV BELOW which are not affected
<a class="green" style="background-color: #92c03e; display: inline-block;
padding: 100px; margin-right: 20px; color: #ffffff; text-decoration:none;">
Button 1
</a>

<a class="blue" style="background-color: #35a8e0; display: inline-block; 
padding: 100px; color: #ffffff; text-decoration: none;">
Button 2
</a>
Hide result
+1

More articles:


All Articles