Help styling a hyperlink to look like a button

[jjamjatra]

Is there any way to make a hyperlink tag appear more like an input type=button ? Here is the CSS which I am using for my buttons and I really like the appearance:
`.coolbutton
{
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
background-image: url(images/imgBlue-button-base.jpg);
background-position: center;
color: White;
cursor:pointer;

}
.coolbutton:hover
{
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
background-image: url(images/imgBlue-button-baseOn.jpg);
background-position: center;
color: Black;
cursor:pointer;
} `

The resulting buttons look very good to me.

I tried applying the following CSS for a hyperlink tag and it gets sort of close but not really looking very good:
`.notsocoolhyperlink
{
padding: 1em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
background-image: url(images/imgBlue-button-base.jpg);
background-position: center;
color: White;
cursor:pointer;

}
.nosocoolhyperlink:hover
{
padding: 1em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
background-image: url(images/imgBlue-button-baseOn.jpg);
background-position: center;
color: Black;
cursor:pointer;
} `

[Paulie_D]

Perhaps a Codepen example?

[jjamjatra]

I never used Codepen before but this is the best I can represent there quickly:

My images for background work OK but are not in Codepen …

[Paulie_D]

Unfortunately, the images won’t show up unless they on on a web server.

I use Photobucket but there are other options.

[Paulie_D]

Here’s the thing though…if you want it to look like a button…why not use the button tag?

Oh,sure you can style the actual button any way you want but it’s a valid tag to hold the anchor.

http://codepen.io/Paulie-D/pen/HFGBl

[jjamjatra]

On my local webserver (not public facing) the background images render nicely for the button. Not too bad for the hyperlink either but far from looking like the buttons appear.

Regarding “why not use the button tag”? I am using a complicated ASP.NET web control – GridView – and for lots of reasons I can only get my delete processing to work with an ASP.NET “LinkButton” which the framework translates into a hyperlink with some generated stuff for postback.

In short, things work fine and the buttons look great for me but is there any way to make that hyperlink appear to look more like the buttons (i.e. they are in an adjacent column of the GridView rows and it would be so nice if I could make the link look like the button(s).

[Paulie_D]

Without seeing an actual page it’s hard to comment.

[jjamjatra]

My site is not public facing yet. But here are the 2 images uploaded to GDrive:

First image for the button

Second image for the button in hover state

[Paulie_D]

Sorry…that’s not going to help.

Unless we have some actual HTML, CSS and proper web served images to play with we can’t do an awful lot to assist.

[jjamjatra]

First, thank you Paulie_D for hanging in here with me. I think I have a public page you can now view to see my issue more clearly. Hopefully, you will be able to come up with a suggestion:

Please have a look at this:

[Paulie_D]

I think the problem is the images you are using are way to big for the purpose you are putting them too.

They just don’t appear right.

As for the hyperlinks it’s just a case of adding some extra padding etc.

http://codepen.io/Paulie-D/pen/jknye

[Author]

Posts