Välj att visa källkoden för denna sida för att se CSS-koden till alla knapparna. Exemplet nedan visar koden till knapp 4:
/* Färg på länkad text i knapparna */
#button4 li a:link, #button4 a:visited {
color: rgba(66,48,1,1);
text-decoration: none;
}
#button4 li a:active {
color: rgba(159,115,2,1);
}
/* Listan <UL> med knapparna */
#button4 ul {
clear: both;
width: auto;
margin: 20px 10px 40px 10px;
padding: 0;
/* border: 1px solid #ccc; */
}
/* Knappen */
#button4 li {
display: inline;
list-style: none;
margin: 0 10px 0 0;
padding: 5px 10px 5px 10px;
text-align: center;
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
font-size: 15px;
color: rgba(66,48,1,1);
border-radius: 5px;
border: 1px solid rgba(248,185,13,1);
background: rgba(243,226,199,1); /* Bakgrundsfärg om övertoningen inte visas */
/* Safari, iOS, Android */
background-image: -webkit-linear-gradient(top,
rgba(252,234,187,1) 0%,
rgba(252,205,77,1) 50%,
rgba(248,181,0,1) 50%,
rgba(251,223,147,1) 100%);
/* Internet Explorer */
background-image: -ms-linear-gradient(top,
rgba(252,234,187,1) 0%,
rgba(252,205,77,1) 50%,
rgba(248,181,0,1) 50%,
rgba(251,223,147,1) 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top,
rgba(252,234,187,1) 0%,
rgba(252,205,77,1) 50%,
rgba(248,181,0,1) 50%,
rgba(251,223,147,1) 100%);
/* W3C standard specification */
background-image: linear-gradient(top,
rgba(252,234,187,1) 0%,
rgba(252,205,77,1) 50%,
rgba(248,181,0,1) 50%,
rgba(251,223,147,1) 100%);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.9),
0 2px 3px rgba(0,0,0,0.70);
}
#button4 li:hover {
cursor: pointer;
/* Safari, iOS, Android */
background-image: -webkit-linear-gradient(top,
rgba(252,222,143,1.00) 0%,
rgba(252,197,52,1.00) 50%,
rgba(225,165,4,1.00) 50%,
rgba(252,213,11,1.00) 100%);
/* Internet Explorer */
background-image: -ms-linear-gradient(top,
rgba(252,222,143,1.00) 0%,
rgba(252,197,52,1.00) 50%,
rgba(225,165,4,1.00) 50%,
rgba(252,213,11,1.00) 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top,
rgba(252,222,143,1.00) 0%,
rgba(252,197,52,1.00) 50%,
rgba(225,165,4,1.00) 50%,
rgba(252,213,11,1.00) 100%);
/* W3C standard specification */
background-image: linear-gradient(top,
rgba(252,222,143,1.00) 0%,
rgba(252,197,52,1.00) 50%,
rgba(225,165,4,1.00) 50%,
rgba(252,213,11,1.00) 100%);
}
/* Muspekare intryckt */
#button4 li:active {
color: rgba(159,115,2,1);
/* Flyttar knappen när den trycks in */
position: relative;
left: 1px;
top: 1px;
}
<div id="button4">
<ul>
<li><a href="#"><strong>Button 4</strong></a></li>
<li><a href="#">WDS program</a></li>
<li><a href="#">Webdesign och HTML</a></li>
<li><a href="#">PHP och MySQL</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Dreamweaver</a></li>
</ul>
</div>
