CODEWITHSUNDEEP
htmlcssbuttonborder
raphnguyen
raphnguyen

Reputation: 3605

HTML Button Border

I am trying to differentiate a button so that clients can see that it is the button that is in focus by default when the page loads. The design calls for a simple border around the button. I have button and button1 defined in my css like so:

.button {
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  font-size: 12px; 
  font-weight: bold; 
  color: #003366
}

.button1 {
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  font-size: 12px; 
  font-weight: bold; 
  color: #003366
  border: #00ffff;
  border-style: solid;
  border-width: 2px;
}

The button that I am trying to focus loses the default formatting. How might I fix this so that it simply keeps its formatting, the only difference being a thicker border around the button? Also, is there a way to make the border simply wrap itself around the shape of the button instead of being a rectangular border?

Here is an image of what my buttons look like:

enter image description here

In this case, I am trying to focus the Jail Address button.

The html for the input buttons is like so:

<input type="reset" class="button" name="refresh" value="Refresh">
<input type="submit" class=button1 name="jail" value="Jail Address" onClick="action='JailAddresses.html'">
<input type="submit" class="button" name="submit" value="Submit" onClick="action='Administrative.html'"> 
<input type="submit" class="button" name="back" value="Back" onClick="action='Administrative.html'">

Upvotes: 5

Views: 78361

Answers (3)

Graham Klyne
Graham Klyne

Reputation: 846

It appears that setting a button border:x style can completely change the button rendering, at least in Safari and Firefox. Here's a little test file I just used to demonstrate the effect:

<html>
  <head>
  </head>
  <body>
    <form>
      <input type="submit" value="no border"/>
      <input type="submit" value="border:0" style="border:0;"/>
      <input type="submit" value="border:2" style="border:2;"/>
      <input type="submit" value="width:8rem" style="width:8rem;"/>
    </form>
  </body>
</html>

  • Rendered in Firefox on MacOS, it looks like this:

    buttons example rendered in Firefox

  • and in Safari:

    buttons example rendered in Safari

So it appears that the behaviour depends on both the border value and the browser. Seems odd to me, but there you are. I think this explains the effect described in the original question.

Upvotes: 3

Silvertiger
Silvertiger

Reputation: 1680

the border by default is going to be rectangle, though with some browsers (not all) you can use the "border-radius: 5px" to get rounded corners

http://www.css3.info/preview/rounded-border/

you could also just make images with the buttons you want and use them instead (png is preferred since it will keep transparency)

.button1 {
    background-image:url('paper.gif');
    background-repeat: no-repeat;
    cursor: hand;
}

I use that often instead of just img src=, then you can add an "on mouseclick" with javascript.. just an option. also, the cursor can be changed so it actually looks like they're rolling over a button :)

Upvotes: 5

James Shuttler
James Shuttler

Reputation: 1374

The default stylings for UI elements like buttons are user-agent defined, AFAIK there isn't a border setting which will allow you to follow the contours of the button without using CSS3's border-radius. Perhaps you should use a different element for your buttons that do not have a pre-defined shape, or use border-radius if appropriate, or a background image for which has the shape that you want.

Upvotes: 0

Related Questions