style link like normal button

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

dwaszak@gmail.com - 30 May 2007 22:52 GMT

Hi,

I have a lot of links in my app ( normal <a
href="http://...">some_text</a> ).

I would like to change CSS style of this links, so that they look like
normal button (like plain <input type="Submit">...).

How can I do that? I've searched the web for some tutorial (or more
precisely part of some .css file), with no results.

Meybe someone knows how to do that?

Best regards,
Damian

Reply to this Message

Bergamot - 30 May 2007 23:04 GMT

> I would like to change CSS style of this links, so that they look like
> normal button (like plain <input type="Submit">...).

It depends on how the link is used in context whether this is advisable
or not. If it's a regular navigation menu, button-type styles are fairly
common. If not, it may mislead the visitor into taking an action they
wouldn't otherwise do. Think twice about this, please.

> I've searched the web for some tutorial (or more
> precisely part of some .css file), with no results.

Where did you look?
http://www.google.com/search?q=css%20buttons

See also
http://css.maxdesign.com.au/listamatic/

Signature

Berg

Reply to this Message

Johannes Koch - 31 May 2007 08:52 GMT

dwaszak@gmail.com schrieb:

> I would like to change CSS style of this links, so that they look like
> normal button (like plain <input type="Submit">...).

In many browsers, the appearance of form controls like buttons cannot be
changed via CSS, but depends on underlying software (tool kit, etc.). If
you change links so that they look like normal buttons on _your_ system,
they may not look like normal buttons one _another_ system.

Signature

Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Reply to this Message

jim - 31 May 2007 13:45 GMT

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Link Button Style
</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">

a    {
    width:155px;
     display:block; /* change to inline for horizontal menu */
    margin-left:10px; /*indents left margin; change for horiz. menu */
    margin-top:0px; /* change to 1 or 2px for top space between
buttons*/
    padding: 2px 5px 2px 5px;
/* padding numbers = top : right : bottom :
left ; */
    text-decoration:none;
    font-family:arial;
    font-weight:bold;
    text-align:center;
    background-color: black;
    color: white;
    font-size:9pt;
    border: 3px red ridge;
    }
a:hover {
    background-color:navy;
    color:red;
    font-style:italic;
    }
</style>
</head>
<body >
<a href="http://www.google.com" target="_blank">
    Go To Google
</a>
<a href="http://www.yahoo.com" target="_blank">
    Go To Yahoo
</a>
<a href="http://www.espn.com" target="_blank">
    Go To ESPN
</a>
<a href="http://www.abcnews.com" target="_blank">
    Go To ABC News
</a>
<a href="http://www.youtube.com" target="_blank">
    Go To YouTube
</a>
</body>
</html>

Reply to this Message

Bergamot - 31 May 2007 14:51 GMT

> <?xml version="1.0" encoding="utf-8"?>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

You apparently haven't been paying attention. Not surprising from
someone with an AOL address. :-\

> a {
> width:155px;

Setting the size of text elements in px units is using the wrong tool
for the job.

> display:block; /* change to inline for horizontal menu */
> margin-left:10px; /*indents left margin; change for horiz. menu */

You are aware that width and margin properties will be ignored on inline
elements?

> font-size:9pt;

Now I know you haven't been paying attention.

> a:hover {
> background-color:navy;
> color:red;

You don't expect your visitors to actually be able to read it, do you?

> font-style:italic;

Oh, the evils of font changes on :hover! I can just see the page having
convulsions now!

> <body >
> <a href="http://www.google.com" target="_blank">
> Go To Google
> </a>

BTW, that's invalid XHTML in more ways than one. Besides, opening new
windows without warning the visitor, especially for every bloody link,
is just plain poor usability.

Start over, please.

Signature

Berg

Reply to this Message

Johannes Koch - 31 May 2007 15:11 GMT

Bergamot schrieb:

>> a {
>> width:155px;
[quoted text clipped - 7 lines]
> You are aware that width and margin properties will be ignored on inline
> elements?

width, yes, margin, no. See <http://www.w3.org/TR/CSS21/propidx.html>.
Btw, see the line "display:block;".

Signature

Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Reply to this Message

Bergamot - 31 May 2007 19:58 GMT

> Bergamot schrieb:
>>> a {
[quoted text clipped - 6 lines]
>
> width, yes, margin, no. See <http://www.w3.org/TR/CSS21/propidx.html>.

I stand corrected. I never use margins on non-replaced inline elements
so didn't think to check the specs.

> Btw, see the line "display:block;".

I was referring to the poster's comments about the horizontal menu.

Signature

Berg

Reply to this Message

dwaszak@gmail.com - 31 May 2007 15:13 GMT

The code is not really what I was looking for.

I want to user to "belive" that link is a button (users say tha they
can't see an option in my app, because it is a link, not a normal
button).

What I need is sth like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<input type="submit" value="google"/>
<br/>
<a href="http://www.google.com">google</a>
</body>
</html>

Link should look like button above this link. Without any backgrounds,
gifs, different widths, heights... just a plain normal button.

Reply to this Message

Jukka K. Korpela - 31 May 2007 17:01 GMT

Scripsit dwaszak@gmail.com:

> The code is not really what I was looking for.

If you are commenting on something, you should indicate what you are
commenting on. Why don't you go all the way and learn how to post to Usenet
decently?

> I want to user to "belive" that link is a button

And you want us to help to you to deceive users? What do _we_ get from
participating in your forgery?

> (users say tha they
> can't see an option in my app, because it is a link, not a normal
> button).

Your "app" must be rather crappy. You have misled people and now you "solve"
this by misleading them more.

> Link should look like button above this link.

And how do you expect to know how a button looks like, if it looks like
anything?

> Without any backgrounds,
> gifs, different widths, heights... just a plain normal button.

You're just a plain normal clueless newbie who seems to have decided to
remain clueless. Otherwise you would have posted a URL, and someone might
have told you where to go to have your page redesigned.

Signature

Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Reply to this Message

Bergamot - 31 May 2007 20:11 GMT

> <input type="submit" value="google"/>
> <a href="http://www.google.com">google</a>
>
> Link should look like button above this link.

As Mr Koch has already mentioned, buttons look different on different
systems. Their style is determined by the Operating System and the
user's desktop theme.

You cannot get a link to look like a "button" to everyone. It has to be
declared as a form control for that.

Signature

Berg

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / May 2007

style link like normal button