Need help. CSS button not working in ie and safari
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.
html <a class="inner-button" href="http://radiotelephonetutor.com/Paypal.php"> <div><span></span></div> </a> 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; }