Custom language links

This rather long video shows how to create custom language switcher buttons.  The supporting text below is the code used in the video.

####### HTML ######

<!-- Custom Button to go to Cymraeg page --!>
<ul class="my-custom-button">
<li>
<a href="/node/85?language=cy" > Cymraeg </a>
</li>
<ul>

<!-- Custom Button to go to English page --!>
<ul class="my-custom-button">
<li>
<a href="/content/welcome.html?language=en" > English </a>
</li>
<ul>

####### CSS #######

/*Now to make these links look like buttons */

ul.my-custom-button li a{             /*Select the link inside the list in my-custom-button class */
display: block;                    /*Display it as a block so the clickable area of the link can be set */
width: 230px;                    /*Set the block width in pixels */
height: 50px;                    /*Set the block height in pixels */
color: #ffffff;                    /*Set the text colour to white */
background-color: #2573ae;            /*Set the background colour to blue */
text-align: center;                /*Align the text to the centre */
padding-top: 20px;                /*Add 20 pixels of white space to the top of the button */
font-size: large;                /*Set the font size to large */
border-radius: 10px;                /*Round the corners of the block */
box-shadow: 10px 10px 5px #888888;        /*Add a drop shadow to give depth */
float: right;                    /*Ask the button to float to the right hand side of the screen */
}

ul.my-custom-button {
list-style-type: none;                /*Clear the list bullet */
padding-right: 20px;                  /*Add 20 pixels of padding to the right of the button*/

}


 
00:00