3D-länkar utan bilder

Du kan göra knapplänkar med 3D-effekt helt utan bilder och JavaScript.

Koden nedan har två varianter. Den första använder du om alla länkar på sidan skall ha samma utseende och du inte har sidan länkad till en stilmall som styr länkarnas utseende.

Den andra använder du om en del länkar skall förändras, men andra visas som vanligt eller som den globala stilmallen säger.

1. ANVÄND DEN HÄR KODEN OM ALLA LÄNKAR SKALL VARA LIKADANA OCH DU INTE HAR SIDAN KOPPLAD TILL EN GLOBAL STILMALL SOM STYR LÄNKARNAS UTSEENDE. a. Placera stilmallen i HEAD-elementet. Ändra "width" så att den längsta länktexten får plats och "height" så att ditt teckensnitt ryms snyggt. Om "width" har ett för litet värde för texten, kommer textraden att brytas och just den knappen blir dubbelt så hög. Du kan också pröva med att ta bort "width" och "height" helt och hållet. Då kommer knappens längd att anpassas till textlängden. <STYLE type="text/css"> A:link {text-decoration: none; color: #ffffff; background-color: #FF4040; border-top: 2px solid #FFC0C0; border-right: 2px solid #C00000; border-bottom: 2px solid #C00000; border-left: 2px solid #FFC0C0; padding: 3px; width: 60px; height="20"} A:active {text-decoration: none; color: #ffffff; background-color: #FF4040; border-top: 2px solid #FFC0C0; border-right: 2px solid #C00000; border-bottom: 2px solid #C00000; border-left: 2px solid #FFC0C0; padding: 3px; width: 60px; height="20"} A:visited {text-decoration: none; color: #ffffff; background-color: #FF4040; border-top: 2px solid #FFC0C0; border-right: 2px solid #C00000; border-bottom: 2px solid #C00000; border-left: 2px solid #FFC0C0; padding: 3px; width: 60px; height="20"} A:hover {text-decoration: none; color: #FFFF00; background-color: #FF4040; border-top: 2px solid #C00000; border-right: 2px solid #FFC0C0; border-bottom: 2px solid #FFC0C0; border-left: 2px solid #C00000; padding: 3px; width: 60px; height="20"} </STYLE> b. Placera "knapparna" i BODY, där länkarna skall visas. Du kan lägga in dem i en tabell. <P><A href="länken.html">Länk 1</A></P> <P><A href="länken.html">Länk 2</A></P> 2. DEN HÄR KODEN ANVÄNDER DU OM EN DEL LÄNKAR SKALL VISAS NORMALA ELLER STYRAS AV DEN GLOBALA STILMALLEN. HÄR INNEHÅLLER STILMALLEN DEFINITIONER FÖR KLASSEN "KNAPP", SOM ANROPAS I LÄNKKODEN. a. Placera stilmallen i HEAD-elementet. Ändra "width" så att den längsta länktexten får plats och "height" så att ditt teckensnitt ryms snyggt. Om "width" har ett för litet värde för texten, kommer textraden att brytas och just den knappen blir dubbelt så hög. Du kan också pröva med att ta bort "width" och "height" helt och hållet. Då kommer knappens längd att anpassas till textlängden. <STYLE type="text/css"> A:link.knapp {text-decoration: none; color: #ffffff; background-color: #FF4040; border-top: 2px solid #FFC0C0; border-right: 2px solid #C00000; border-bottom: 2px solid #C00000; border-left: 2px solid #FFC0C0; padding: 3px; width: 60px; height="20"} A:active.knapp {text-decoration: none; color: #ffffff; background-color: #FF4040; border-top: 2px solid #FFC0C0; border-right: 2px solid #C00000; border-bottom: 2px solid #C00000; border-left: 2px solid #FFC0C0; padding: 3px; width: 60px; height="20"} A:visited.knapp {text-decoration: none; color: #ffffff; background-color: #FF4040; border-top: 2px solid #FFC0C0; border-right: 2px solid #C00000; border-bottom: 2px solid #C00000; border-left: 2px solid #FFC0C0; padding: 3px; width: 60px; height="20"} A:hover.knapp {text-decoration: none; color: #FFFF00; background-color: #FF4040; border-top: 2px solid #C00000; border-right: 2px solid #FFC0C0; border-bottom: 2px solid #FFC0C0; border-left: 2px solid #C00000; padding: 3px; width: 60px; height="20"} </STYLE> b. Placera "knapparna" i BODY, där länkarna skall visas. Du kan lägga in dem i en tabell. <P><A class="knapp" href="länken.html">Länk 1</A></P> <P><A class="knapp" href="länken.html">Länk 2</A></P>