<\/strong> First you can use a CSS button generator like ButtonMaker<\/a>. \u00a0Tweek the settings to make the button look like you want it then copy the CSS code.<\/p>\n Open up your HTML file (in Notepad or in Mozilla Thimble). \u00a0Paste the copied code into the <head> section of your page. \u00a0This will need to be in <style> tags (<style> before the code, <\/style> after the copied code)<\/p>\n Next we need to add in code to display your button. \u00a0This needs to go into the <body> section of the page.<\/p>\n We have to find code to display the button. \u00a0You can get this by viewing the page source on the ButtonMaker<\/a> site and looking for the part that has “View the CSS” in it.<\/p>\n ….if you get stuck, the code you need is:<\/p>\n <div id=”button-box”> Add this code into your page and change the text from\u00a0“View the CSS” to something more appropriate for your website.<\/p>\n Finally in the <a href..> tag you need to change the ‘#’ to be the web address you want to link to.<\/p>\n Have a look at my example<\/a>\u00a0to see a working button. \u00a0It actually links to a lovely site called Don’t Click It<\/a> which tries out different ways of using websites without clicking your mouse – worth having a look and a play!<\/p>\n Alternative:<\/strong><\/p>\n A different way to do this is to use code in the main body of the page. \u00a0This is particularly useful when you can’t change the CSS such as with a blog. \u00a0The code you need is:<\/p>\n <a href=”TARGET URL GOES HERE”>![\"\"](\"https:\/\/digitalmediacomputing.org.uk\/wp-content\/uploads\/2012\/11\/Button.png\" "\\"Button\\"")
<\/a>Today we looked briefly at rollover images<\/strong>. \u00a0This is something that is easier using web development software but is still very possible when making the pages yourself using HTML.<\/p>\n
\n<a href=”#<\/a>” class=”button”>View the CSS<\/a>
\n<\/div><\/p>\n
\n<img src=”URL OF FIRST IMAGE GOES HERE” onmouseover=”this.src=’URL OF SECOND IMAGE GOES HERE'” onmouseout=”this.src=’URL OF FIRST IMAGE GOES HERE'” \/>
\n<\/a><\/p>\n