Menu
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:
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'">
464
The border property is used to provide the borders to the buttons for which we use border-radius property is used for styling button borders for rounding the corners of the buttons. We can also provide give double stroke by adding another border property on the inner span element by reducing the border-radius property.
#button { border: none; } This seems to work just fine.
The outline button style removes all background images or colors from a button and gives it a lighter look. The outline style buttons can be used for various purposes, for example: Indicating the secondary action complementing the primary action.
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 :)
54
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:
and 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.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
