css border radius mouse hover fog? - html

Question

I want a css button with border-radius, but I want this border to be well contoured.
when I put mouse hover this button there is a kind of fog in borders:
.b_b{
cursor : pointer;
padding:6px;
font-size : 10pt;
font-weight : bold;
color : #2e9fff;
text-decoration : none;
border:1px solid #cce9ff;
background:#fff;
border-radius:9px;
z-index:999px;
}
.b_b:hover{
background-color:#2e9fff;
color:#fff;
}
<span class=b_b>button</span>
https://jsfiddle.net/42fmsj20/
what is wrong?

Answer 1

You can simply use the background-clip property to achieve this. For an in-depth description on how that property works you can check out the W3Schools example and explanation here.
CSS:
-webkit-background-clip: padding; /* Safari 4+, Chrome 6+ */
-moz-background-clip: padding; /* Firefox 3.6+ */
background-clip: padding-box; /* Firefox 4+, Safari 3+, Opera 10.5+, IE9+ */
JSFiddle
I also noticed the you had forgot to put double quotes "" around your class value, make sure you always include those as they are required for valid syntax.
<span class="b_b">button</span>

Answer 2

Example:
https://jsfiddle.net/2zbu8btx/
`<span>` tag is used to determine the line elements of the document
add display: inline-block; for span
In fact, an element in its effect similar to recessed elements (such as tag <img>). At the same time its interior is formatted as a block element, and the element itself - as built.
https://jsfiddle.net/mgcLbo92/
.b_b{
cursor : pointer;
display: inline-block;
padding:16px 50px;
font-size : 10pt;
font-weight : bold;
color : #2e9fff;
text-decoration : none;
border:1px solid #cce9ff;
background:#fff;
border-radius:9px;
z-index:999px;
}
.b_b:hover{
background:#2e9fff;
color:#fff;
}
<span class=b_b>button</span>

Answer 3

The problem is half aesthetical and half a matter of antialiasing.
When you put darker border around lighter element and then, on hover state, invert it to lighter border around darker element, you'll end in unpleasant effect like this, it will just look like the border is some kind of gradient on edges of the element. Your eye will not consider it as a border anymore since it does not delimit the area of element from the outer space.
Try adding darker border to hover state, you'll get rid of foggy effect and it will look nicer.
See updated version: https://jsfiddle.net/bd2h2h8b/
.b_b:hover{
background-color:#2e9fff;
color:#fff;
border-color: #1e6fCf;
}