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 3:
/* Listan <UL> med knapparna */
ul {
width: 200px;
margin: 0;
padding: 0;
}
/* Listelementen <LI> med knapparna */
li {
list-style: none;
margin: 5px 0 10px 0;
padding: 5px 10px 5px 10px;
text-align: center;
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
font-size: 15px;
}
/* Färg på länkad text i knapparna */
.button3 a:link, .button3 a:visited {
color: rgba(156,48,121,1);
text-decoration: none;
}
.button3 a:active {
color: rgba(255,255,255,1);
}
/* Knappen */
.button3 {
color: rgba(66,48,1,1);
border-radius: 5px;
border: 1px solid rgba(251,185,232,1);
background: rgba(251,168,225,1); /* Bakgrundsfärg om övertoningen inte visas */
/* Safari, iOS, Android */
background: -webkit-linear-gradient(top,
rgba(252,236,252,1) 0%,
rgba(251,166,225,1) 50%,
rgba(253,137,215,1) 55%,
rgba(255,124,216,1) 100%);
/* Internet Explorer */
background: -ms-linear-gradient(top,
rgba(252,236,252,1) 0%,
rgba(251,166,225,1) 50%,
rgba(253,137,215,1) 55%,
rgba(255,124,216,1) 100%);
/* Mozilla Firefox */
background: -moz-linear-gradient(top,
rgba(252,236,252,1) 0%,
rgba(251,166,225,1) 50%,
rgba(253,137,215,1) 55%,
rgba(255,124,216,1) 100%);
/* W3C standard specification */
background: linear-gradient(top,
rgba(252,236,252,1) 0%,
rgba(251,166,225,1) 50%,
rgba(253,137,215,1) 55%,
rgba(255,124,216,1) 100%);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.3),
0 2px 3px rgba(0,0,0,0.70);
}
.button3:hover {
cursor: pointer;
/* Safari, iOS, Android */
background: -webkit-linear-gradient(top,
rgba(255,255,255,1) 0%,
rgba(254,231,247,1) 50%,
rgba(254,195,234,1) 51%,
rgba(255,184,234,1) 100%);
/* Internet Explorer */
background: -ms-linear-gradient(top,
rgba(255,255,255,1) 0%,
rgba(254,231,247,1) 50%,
rgba(254,195,234,1) 51%,
rgba(255,184,234,1) 100%);
/* Mozilla Firefox */
background: -moz-linear-gradient(top,
rgba(255,255,255,1) 0%,
rgba(254,231,247,1) 50%,
rgba(254,195,234,1) 51%,
rgba(255,184,234,1) 100%);
/* W3C standard specification */
background: linear-gradient(top,
rgba(255,255,255,1) 0%,
rgba(254,231,247,1) 50%,
rgba(254,195,234,1) 51%,
rgba(255,184,234,1) 100%);
}
/* Muspekare intryckt */
.button3:active {
color: rgba(255,255,255,1);
/* Flyttar knappen när den trycks in */
position: relative;
left: 1px;
top: 1px;
}
<ul>
<li class="button1"><a href="#">Button 1</a></li>
<li class="button2"><a href="#">Button 2</a></li>
<li class="button3"><a href="#">Button 3</a></li>
<li class="button4"><a href="#">Button 4</a></li>
<li class="button5"><a href="#">Button 5</a></li>
<li class="button6"><a href="#">Button 6</a></li>
</ul>
