Search code examples
htmlcssbuttonborder

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'">

Solution

  • 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 :)