473,226 Members | 1,406 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,226 software developers and data experts.

style link like normal button

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

May 30 '07 #1
9 37039
dw*****@gmail.com wrote:
>
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/

--
Berg
May 30 '07 #2
dw*****@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.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
May 31 '07 #3
jim
<?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>

May 31 '07 #4
jim wrote:
<?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.

--
Berg
May 31 '07 #5
Bergamot schrieb:
>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?
width, yes, margin, no. See <http://www.w3.org/TR/CSS21/propidx.html>.
Btw, see the line "display:block;".

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
May 31 '07 #6
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.
May 31 '07 #7
Scripsit dw*****@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.

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

May 31 '07 #8
Johannes Koch wrote:
Bergamot schrieb:
>>a {
width:155px;
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?

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.

--
Berg
May 31 '07 #9
dw*****@gmail.com wrote:
>
<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.

--
Berg
May 31 '07 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Yasutaka Ito | last post by:
Hi, Is there any way to disable the "Normal" button of the form? A button displayed between the Minimum and Maximize button? I want the user to be allowed to either minimized or maximized, but...
5
by: J | last post by:
Hi All, I have a quick question, I am making a little script that shows users how easy it is to have there clipboards read. I would like to capture my users clipboard (plain text only) and then...
0
by: JFF | last post by:
Hello I would like to transmit commands from a Data Access Page to my access database. The user see a link or button in his HTML page ; he clics and the result should be to transmit to the Access...
0
by: goodmannewz | last post by:
How can I display a web-style link without explicit wirting the URL? It does work when I wrote a URL for example:www.microsoft.com in the richtextbox. However, I want to show is a URL link...
11
by: Mark Rae | last post by:
Hi, Is there any way to modify the style of the button portion of an HtmlInput control? I have a CSS class which I use for all of the buttons to try to make them a little less ugly than the...
1
by: akshakeel | last post by:
Hi all, Is it possible to apply style to browse button, the code for which is, <input type="file"> I want to add a background image to the "Browse" button. (using css) But the problem im...
0
by: jobs | last post by:
Any way to change the style of a button inside a Login Control? Any way to assign a skin id to the control, that impacts a control (like button) inside the control? thanks for any help or...
2
by: gurbaksh08 | last post by:
how to link flash button in asp.net so kindly send the procedure of this as soon
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.