Thursday, 11 April 2013

How to - Make clickable buttons (color change on hover)



The following tutorial guides you through creating a clickable button, beginning at easy, and progressing to a more advanced application for this tool.




<input type="button" value="Click Here!"/>

The above button, has a default color when static and when hovering. As yet nothing happens when you click it. but lets change that now...




<input type="button" value="Click here!" onClick="window.open( 'WEBSITE URL YOU WOULD LIKE THE BUTTON TO OPEN', '_blank' )"/>

Again the above button has two default colors, but now it links to my blog (and will open in a new tab due to the _blank text). All you need to do is insert the website of your choice instead of the RED text above, and you could just stop here... but lets go a few steps further.






<input type="button"
button style="font-size: 24px; font-weight: bold; color: #f4f1e3; background-color:#2B2917";
value="Click here!"
onClick="window.open( 'http://easydesigntipsandtricks.blogspot.com.au/', '_blank' )"/>

In the above code, we have edited the "font-size" in pixels, just increase or decrease this number for larger or smaller text. This will of course change the size of your button. We have also made the text BOLD by entering the text font-weight: bold;. If you do not require bold text, simply delete that part of the code. We have chosen the text color, by specifying a hex color code for white which is #ffffff. For more color codes, go HERE. We have also specified our background button color of #008B00.

Are you ready for more?




<center>
<input type="button"
onmouseover="this.style.background='#93877e'"
onmouseout="this.style.backgroundColor='#2B2917'"
button style="font-size: 24px; font-weight: bold; color: #f4f1e3; background-color:#2B2917";
value="Click here!"
onclick="window.open('http://easydesigntipsandtricks.blogspot.com.au/', '_blank' )"/>
</center>

Now when you hover over the button, the background color changes to back (onmouseover="this.style.background='#93877e'"). The hex code for the lighter brown used is  #93877e, and when you move the cursor away it reverts to the dark brown (onmouseout="this.style.backgroundColor='#2B2917'"). The hex code for this particular shade of brown is #2B2917.

These are just some of the things you can achieve with the "Button" attribute. Have fun!

No comments :

Post a Comment

Facebook Twitter Google + RSS Feed Email Me