The pure <a></a> only displays as a link. But I saw it can be modified into a button like image. For instance, <a class=”xxxx” href=”xxxxx.com”> Some Name</a>. This is achieved POSSIBLY via the class attribute.
How could it be done?
<i> </i><!DOC HTML> <html> <head> <title> Untitled </title> <style type="text/css"> .anchorButton { height:75px; width:100px; } </style> </head> <body> <a href="#" onclick="alert('Go someplace');return false"> <img src="http://upload.wikimedia.org/wikipedia/commons/9/92/Easy_button.JPG" class="anchorButton"> </a> <br> <a href="#" onclick="alert('Go someplace else');return false"> <img src="http://25.media.tumblr.com/tumblr_m8s5qtbyI41qe1z7co1_400.gif" class="anchorButton"> </a> </body> </html>
[code=html]<style type="text/css"> .button { padding: 5px; background: #ddd; border-top: 1px solid #eee; border-left: 1px solid #eee; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; } .button:hover { padding: 5px; background: #ddd; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-bottom: 1px solid #eee; border-right: 1px solid #eee; } </style> <a href="http://www.google.com/" class="button">Button</a>[/code]
<i> </i><!DOCTYPE HTML> <html> <head> <title> CSS image button </title> <!-- From: http://www.webdeveloper.com/forum/showthread.php?t=263658 and: http://www.webdeveloper.com/forum/showthread.php?t=263625 --> <style type="text/css"> #btn1 { height:100px; width:100px; background-image: url("http://upload.wikimedia.org/wikipedia/commons/9/92/Easy_button.JPG"); background-size: 100px 100px; background-repeat: no-repeat; display: inline-block; } #btn2 { height:100px; width:100px; background-image: url("http://25.media.tumblr.com/tumblr_m8s5qtbyI41qe1z7co1_400.gif"); background-size: 100px 100px; background-repeat: no-repeat; display: inline-block; } .button { border-top: 2px solid #ccc; border-left: 2px solid #ccc; border-bottom: 4px solid #333; border-right: 4px solid #333; } .button:hover { border-top: 4px solid #333; border-left: 4px solid #333; border-bottom: 2px solid #ccc; border-right: 2px solid #ccc; } </style> </head> <body> <a href="http://www.google.com/" id="btn1" class="button"> </a> <a href="http://www.webdeveloper.com/" id="btn2" class="button"> </a> </body> </html>
Help @scottjsn spread the word by sharing this article on Twitter...