Modify <a> into a button image

**scottjsn** · 08-16-2012, 02:26 PM

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?

**JMRKER** · 08-16-2012, 03:10 PM

Your request is unclear to me, so this is just a SWAG...

Code:

<!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>

**theCoen** · 08-17-2012, 10:58 AM

HTML Code:

<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>

Something like that?

**JMRKER** · 08-17-2012, 02:56 PM

Or possibly?

Code:

<!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>

Thread: Modify <a> into a button image

Thread Tools

Display

Modify <a> into a button image

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions