7

Is it possible to make hyperlink looked like button WITH text on it?

We can make hyperlink button with code:

<a href="..."> <img src="button.png" width="100" height="50" alt="Some text"></img> </a>

but i need also TEXT in the center of button.

Thanks.

Victor_Z
  • 121
  • 1
  • 3
  • 5

3 Answers3

4

I'd suggest, without knowing exactly what you want, and assuming the following mark-up:

<a href="#"><img src="path/to/image.png" /><span>Some text</span></a>

a {
    position: relative;
    display: inline-block;
}

a span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -1em;
    margin-left: -50%;
    width: 100%;
    height: 2em;
    color: #f90;
    background-color: rgba(0,0,0,0.5);
}​

JS Fiddle demo.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
3

It's possible by setting the button as a background:

<a href="..." style="text-align:center; background: url('button.png'); width: 100px; height: 50px;">Your text</a>

But I would try to avoid buttons with background images (unless they were a strange shape). Instead, I would try to use CSS3.

Ryan Casas
  • 666
  • 5
  • 19
0

You can use some UI framework like bootstrap or Flat ui . 

<a href="#" class="btn btn-primary"> Click Me</a>
blossoms
  • 51
  • 1
  • 2
  • 8