Custom knapper
HejJeg er igang med at lave en kraftig ændring i designet af mit site og i den forbindelse vil jeg gerne skille mig af med de "kedelige" standard <input type="submit" /> knapper og i stedet bruge nogle fine knapper jeg har lavet i photoshop.
Til at lave knappen og få den ind på mit site har jeg fulgt denne guide: http://designinstruct.com/web-design/make-a-simple-and-modern-web-ui-button-in-photoshop/
Det jeg har tilføjet til mit stylesheet er dette:
#booking_knap {
display: block;
width: 170px;
height: 50px;
background: url(../images/web_button.png) no-repeat 0 0;
text-indent: -9999px;
outline: none;
}
a:hover#booking_knap, a:focus#booking_knap {
background: url(../images/web_button.png) no-repeat 0 -50px;
}
display: block;
width: 170px;
height: 50px;
background: url(../images/web_button.png) no-repeat 0 0;
text-indent: -9999px;
outline: none;
}
a:hover#booking_knap, a:focus#booking_knap {
background: url(../images/web_button.png) no-repeat 0 -50px;
}
Og mit link er lavet således:
<a href="#" id="booking_knap">Send</a>
Når jeg så åbner min html-side, så vises knappen ikke, men kører jeg musen henover hvor den skulle være, så får jeg den hånd man normalt får når man kører henover et link.
Jeg har jo fulgt guiden 100%, hvordan kan det så være at det ikke virker.
Hele mit stylesheet kan ses her: http://pastebin.com/KJF5v7bX
Og jeg har selvfølgelig husket at linke til mit stylesheet.
