Tamil Arasan Tamil Arasan - 2 months ago 6
CSS Question

How to make a CSS button work correctly?

I've created a CSS box to replace the floating (sliding) sidebar image .jpg banner on my site which is hosted on blogger. But, the CSS button is not working correctly as it should work.

Actual code created [Working correctly]:

<html>
<head>
<style>
div {
background-color: white;
width: 300px;
border: 3px solid #008CBA;
padding: 25px;
font-size: 35px;
margin: 25px;
}
.button {
background-color: #008CBA;
border-radius: 6px;
border: none;
color: white;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
width: 180px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
}
.button {
background-color: #008CBA;
color: white;
border: 2px solid #008CBA;

}
.button:hover {
background-color: white;
color: black;
border: 2px solid #008CBA;
</style>
</head>
<body>

<div><center><font color="red">Earn Upto $500 per month !!!!</font>
<br />
<p style="font-size:20px">Best sites in the world that pay up to $10 per study.</p>

<a class="button" href="http://www.genuineonlinefreejobs.com/2015/04/top-10-genuine-paid-online-jobs-survey-panels.html" target="_blank" title="Click here to start making money - No Registration fees!!!">LEARN MORE</a>

<br />
<p style="font-size:8px">* Opportunities & earnings will vary depending on your Geo location</p>
</center>
</div>
</body>
</html>


Code edited to work on blogger: [CSS button appear like a link]

<div id='genuinesurvey'>
<style>
.box {
background-color: white;
width: 250px;
border: 3px solid #008CBA;
padding: 25px;
font-size: 35px;
margin: 25px;
}
.button {
background-color: #008CBA;
border-radius: 6px;
border: none;
color: white;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
width: 180px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
}
.button {
background-color: #008CBA;
font-color: white;
border: 2px solid #008CBA;
}
.button:hover {
background-color: white;
font-color: black;
border: 2px solid #008CBA;
}
</style>
<div class="box"><center><font color="red">Earn Upto $500 per month !!!!</font>
<br />
<p style="font-size:20px">Best sites in the world that pay up to $10 per study.</p>

<div class="button"><a href="http://www.genuineonlinefreejobs.com/2015/04/top-10-genuine-paid-online-jobs-survey-panels.html" target="_blank" title="Click here to start making money - No Registration fees!!!">LEARN MORE</a></div>
<br />
<p style="font-size:8px">* Opportunities & earnings will vary depending on your Geo location.</p>
</center>
</div>
<style>
#genuinesurvey {
position: relative;
}
</style>
</div>

Answer

When I tested the two excerpts of code out the only thing I could tell was different was the text inside the button, that said you should really clarify more then saying your button is not working right. To fix the text issue just add this to your code:

a {
  text-decoration:none;
  color:white;
}
a:hover {
  color:black;
}

Hope this helps.

Comments