Custom vertaalknop

Voorbeelden:

Zal hieronder screenshotjes plaatsen van live voorbeeld websites die doorlinken naar de website.

Workflow:
Copy & paste de code in je html/css.

Wil je een verticaal vertaalknop?

/*-- verticaal custom talenknop --/*
.no-touch .nav-language .btn-language:before { display: none;}
.no-touch .nav-language ul:last-child li { float: left; margin: 5px; display: block;}
.no-touch .nav-language .btn-language:before { display: none;}
*/

<style>
@media only screen and (min-width: 672px) {
/*-- custom talenknop --*/
.no-touch .nav-language .btn-language { padding-left: 15px;}
.no-touch .nav-language ul:last-child { font-size: 1em; background: #4F4F4F; color: #fff; text-transform: uppercase;}
.no-touch .nav-language ul:last-child a { font-size: 0.8em; background: #4F4F4F; color: #fff; margin-left: 2em;}
.no-touch .nav-language ul:last-child .active { text-decoration: none; color: #ccc;}
.no-touch .nav-language .btn-language:before { text-rendering: optimizeLegibility; background-image: url('http://library.dtgwebsites.nl/upl/website/custom-vertaalknop/eu_srcset-large.png'); content: ""; background-size: 15px 15px; width: 15px; height: 15px; left: -0.3em;}
.no-touch .nav-language li:nth-child(2):before { text-rendering: optimizeLegibility; background-image: url('http://library.dtgwebsites.nl/upl/website/custom-vertaalknop/nl0_srcset-large.png'); content: ""; background-size: 15px 15px; width: 15px; height: 15px; margin-left: -0.3em; position: absolute;}
.no-touch .nav-language li:nth-child(3):before { text-rendering: optimizeLegibility; background-image: url('http://library.dtgwebsites.nl/upl/website/custom-vertaalknop/en_srcset-large.png'); content: ""; background-size: 15px 15px; width: 15px; height: 15px; margin-left: -0.3em; position: absolute;}

/*-- verticaal custom talenknop --/*
.no-touch .nav-language .btn-language:before { display: none;}
.no-touch .nav-language ul:last-child li { float: left; margin: 5px; display: block;}
.no-touch .nav-language .btn-language:before { display: none;}
*/
}
</style>

Vlaggen

background-image: url() kan je doorlinken naar de vlaggen op deze pagina. Mis je een vlag? Geef dit dan even door ;)

Succes!

europa

frans

nederlands

pools

engels

spaans

duits