424,303 Members | 1,356 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,303 IT Pros & Developers. It's quick & easy.

button default style

P: n/a
I was hoping to style a link to look like a button using css. I thought I
might be able to use something like display:button, but it appears this
doesn't exist in the css 2.1 spec. I then looked at Appendix D to see how it
is suggested it would be styled, and found just

button, textarea,
input, select { display: inline-block }

I take it that the button-like look of buttons is therefore meant to be part
of the content, and can't be applied to something else (which I suppose
could make sense, with it being a form control).

So, is there any other way of making a link look like a button, with all the
details (such as text vertically and horizontally centred, text moves
slightly when click, two borders when being pressed on)?

In case you are wondering what the application is, it is intended to have a
"button" that takes you to another page, without using javascript. (It is
made using asp.net, so if this doesn't work I have an option to post back
the form and get it to redirect the page, but that seems a bit OTT for
changing pages, so it would be nice to just have a css solution.)

Thanks,
Martin
Jun 6 '06 #1
Share this Question
Share on Google+
5 Replies


P: n/a
"Martin Eyles" <ma**********@NOSPAMbytronic.com> wrote in message
news:12*************@corp.supernews.com...
I was hoping to style a link to look like a button using css. I thought I
might be able to use something like display:button, but it appears this
doesn't exist in the css 2.1 spec. I then looked at Appendix D to see how
it is suggested it would be styled, and found just

button, textarea,
input, select { display: inline-block }

I take it that the button-like look of buttons is therefore meant to be
part of the content, and can't be applied to something else (which I
suppose could make sense, with it being a form control).

So, is there any other way of making a link look like a button, with all
the details (such as text vertically and horizontally centred, text moves
slightly when click, two borders when being pressed on)?

In case you are wondering what the application is, it is intended to have
a "button" that takes you to another page, without using javascript. (It
is made using asp.net, so if this doesn't work I have an option to post
back the form and get it to redirect the page, but that seems a bit OTT
for changing pages, so it would be nice to just have a css solution.)

Thanks,
Martin


Actually, figure most of the styling out with inset/outset borders, but
still no idea when it comes to vertically centering the text. Also, I can't
seem to size it when styled as inline-block - this only seems to work when
styled as block.

Any Ideas?

Thanks,
Martin
Jun 6 '06 #2

P: n/a
Martin Eyles wrote:
I was hoping to style a link to look like a button using css.


For what it is worth, take a look at
http://lingo.uib.no/v5/buttontest.html where I made an attempt to apply
the inset reverse (3d) effect on links.

That probably didn't answer your question, but might be interesting
nonetheless.

- Daniel
Jun 6 '06 #3

P: n/a
On Tue, 06 Jun 2006 13:49:06 +0200, Martin Eyles
<ma**********@NOSPAMbytronic.com> wrote:
I was hoping to style a link to look like a button using css.

In case you are wondering what the application is, it is intended to
have a
"button" that takes you to another page, without using javascript.


Isn't that just what hyperlinks do? Take you to another page without using
javascript? What's the point in making a link look like a button while
still behaving like a link? You'll only confuse your visitors, who expect
links for going to different pages, and buttons to submit forms.

--
Garmt de Vries
Jun 7 '06 #4

P: n/a
"Garmt de Vries" <ga**********@googlemail.com> wrote in message
news:op.tartpxaajsw2os@nautilus...
On Tue, 06 Jun 2006 13:49:06 +0200, Martin Eyles
<ma**********@NOSPAMbytronic.com> wrote:
I was hoping to style a link to look like a button using css.

In case you are wondering what the application is, it is intended to
have a "button" that takes you to another page, without using
javascript.


Isn't that just what hyperlinks do? Take you to another page without using
javascript? What's the point in making a link look like a button while
still behaving like a link? You'll only confuse your visitors, who expect
links for going to different pages, and buttons to submit forms.


I have a closed user base for this program, which is used to using buttons
at the bottom of the screen to change between a number of screens on a
software system. I am now creating a version of the program which they can
access from the internet, and so in this case it is best to keep the same
look to the user interface. The reason I am trying to avoid javascript on
the "main menu", is because they will be using the system on some PCs which
we have less control over, and where the system administrators will have
added extra security. Therefore, I want to use javascript only when plain
HTML/CSS won't do.
Jun 7 '06 #5

P: 1
Martin,

Were you ever able to get your links to look like a button using css? I am trying to do something similar for an existing site I am maintaining. They want a button added to a line of existing buttons at the top of the page, but the button text is long and needs to be wrapped to fit on the existing line w/o causing vertical scrollbars in the browser.

I've been unable to find a way to insert a line break in the button text and they don't want me to abbreviate the text, so was thinking I would turn the buttons into links and use css to make them look like standard html buttons so they don't appear different from other buttons.

If you got yours working, would you mind sharing your css code?

Thanks,

Carol
Jun 29 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.