Linkit ja painikkeet
Tekstilinkit
Käyttöliittymässä linkit esitetään alleviivattuna tekstinä, jonka väri on sininen #275a90.
HTML-esimerkki
Lorem ipsum dolor sit amet.
a {
color: #275a90;
text-decoration: underline;
}
a:hover, a:active {
color: #275a90;
text-decoration: none;
}
Linkkipainike
Linkit, joiden halutaan näyttävän painikkeilta, toteutetaan käyttämällä btnlinkki-luokkaa. Oletusarvoinen sininen painike saadaan btnlinkki btnlinkki-blue-yhdistelmällä. Linkkipainikkeen teksti ei ole alleviivattu. Alleviivaus tulee näkyviin vasta, kun käyttäjä vie kursorin linkin päälle.
HTML-esimerkki
HTML-koodi
<a class="btnlinkki btnlinkki-blue" href="https://www.vesi.fi/vesitilanne/">Lue lisää vesitilanteesta</a>
.btnlinkki {
border-radius: 1.75em;
display: inline-block;
margin-top: 1em;
padding: .75em 1.5em;
}
.btnlinkki-blue, .btnlinkki-blue:hover, .btnlinkki-blue:active, .btnlinkki-blue:visited {
background-color: #275a90;
color: #fff;
}
Linkkipainike (pienempi)
Linkkipainikkeesta on myös versio, jossa teksti on pienemmässä koossa. Version saa käyttöön lisäämällä painikkeeseen btnlinkki-smaller-luokan.
HTML-esimerkki
HTML-koodi
<a class="btnlinkki btnlinkki-blue btnlinkki-smaller" href="https://www.vesi.fi/vesitilanne/">Lue lisää vesitilanteesta</a>
.btnlinkki-smaller {
font-size: .92rem;
line-height: 1rem;
margin-top: 20px;
margin-bottom: 20px;
text-decoration: none!important;
}