I have been working on a css belcher button.
My css code works in firefox and chrome. But works just the opposite way in ie and safari.
The hover state shows in non-hover, and the non-hover on hover.
[CODE]
html
<a class="inner-button" href="http://radiotelephonetutor.com/Paypal.php">
CSS
.inner-button div {
display:inline-block;
position: relative;
width:325px;
height:60px;
border-radius:3px;
border:4px solid #FC0006;
margin: 0 auto;
}
.inner-button span:before {
content:“”;
position:absolute;
display:inline-block;
width:312px;
height:39px;
left:0;
right:0;
margin: 0 auto;
bottom:1px;
border-radius:210%/100px 100px 0 0;
background:#FFB014 !important;
background: -moz-linear-gradient(#FFF09B, #FCE237);
background: linear-gradient(#FFE18B, #FFDC22) !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#FFF09B’, endColorstr=‘#FCE237’);
z-index:500 !important;
}
.inner-button span {
display:inline-block;
position:absolute;
width:318px;
height:52px !important;
left:0px;
right:0;
bottom:1px;
margin: 0 auto;
border-top:3px solid #FFFF99;
border-right:3px solid #FF951C;
border-bottom:3px solid #FF951C;
border-left:3px solid #FFFF99;
background:#FFAC0A !important;
z-index:6 !important;
}
.inner-button span:after {
content:“Buy Now”;
display:inline;
position:absolute;
left:0;
right:0;
top:9px;
margin:0 auto;
text-align:center;
width:325px;
height:60px;
text-decoration:none;
font-size:34px;
font-weight:bold;
color:#000 !important;
line-height:2rem;
text-shadow:1px 1px 2px #FFF9E5;
z-index:9999 !important;
}
.inner-button:active; {
display:block;
position:relative;
margin:1rem auto;
width:325px;
height:60px;
}
.inner-button div:hover {
border-radius:3px;
border:4px solid #009900;
background:#FFDD81 !important;
}
.inner-button span:hover {
background:#FFDD81 !important;
}
[/CODE]I appreciate any help and insight you have to offer.