Igår så testade jag på kul att skapa rollover-knappar utan vare sig JavaScript eller bilder utan jag använde mig enbart av CSS + lite Mozilla extensions som ändå kommer att finnas i CSS3 vad jag hört.
Att hovra funkar som förväntat, men när jag klickar på länken så är den bara active(dvs ser nertryckt ut) kanske en tiondels sekund och inte tills jag släpper upp musen såsom Mozilla annars brukar reagera på :active
Vad bör jag fixa till?
Mvh Lukas
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
.moi { width: 200px; height: 24px; position:relative; margin-bottom: 20px; display: block;}
.text {color: white; position: absolute; left:4px; top:4px; text-align: center;
width: 200px; z-index: 4}
.bg { -moz-border-radius: 8px; border: 2px #245bff inset; background: #0000e5;
position: absolute; left:0px; top:0px; width: 200px; height: 24px;
-moz-opacity: 0.7; z-index:3; }
.hilight1 { -moz-border-radius: 10px 0px 0px 0px; border-left: 3px #ebeeff solid; border-top: 3px #ebeeff solid;
position: absolute; top: 2px; left: 2px; width: 60px; height: 14px;
-moz-opacity: 0.1; z-index: 5; }
.hilight2 { -moz-border-radius: 10px 0px 0px 0px; border-left: 1px #ebeeff solid; border-top: 1px #ebeeff solid;
position: absolute; top: 3px; left: 3px; width: 58px; height: 12px;
-moz-opacity: 0.4; z-index: 5; }
.shadow1 { -moz-border-radius: 12px; background: #8080ff; border: 1px #a0a0ff solid;
position: absolute; top: 6px; left: 6px; width: 200px; height: 24px; z-index: 2; }
.shadow2 { -moz-border-radius: 14px; background: #b6b6ff; border: 1px #d8d8ff solid;
position: absolute; top: 4px; left: 4px; width: 204px; height: 28px; z-index: 1; }
.moi:hover .bg { background: #1354fe }
.moi:hover .hilight1 { -moz-opacity: 0.3 }
.moi:hover .hilight2 { -moz-opacity: 0.7 }
.moi:active .text { left: 6px; top: 6px; }
.moi:active .bg { left: 2px; top: 2px; }
.moi:active .hilight1 {left: 4px; top: 4px; width: 80px;}
.moi:active .hilight2 {left: 5px; top: 5px; width: 78px;}
.moi:active .shadow1 { top: 5px; left: 5px; width: 198px; height: 22px;}
.moi:active .shadow2 { top: 3px; left: 3px; width: 202px; height: 26px;}
-->
</style>
</head>
<body>
<a class="moi" href="http://www.aftonbladet.se">
<div class="text">Aftonbladet</div>
<div class="bg"> </div>
<div class="hilight1"> </div>
<div class="hilight2"> </div>
<div class="shadow1"> </div>
<div class="shadow2"> </div>
</a>
<a class="moi" href="http://www.mozilla.org">
<div class="text">Mozilla</div>
<div class="bg"> </div>
<div class="hilight1"> </div>
<div class="hilight2"> </div>
<div class="shadow1"> </div>
<div class="shadow2"> </div>
</a>
</body>
</html>
