Odd visual effect (little line shows) when hovering over button in browser


Tags: css,button,hover

Problem :

We have a few buttons on a web page that have this odd little line show up on the right side when you hover over the button. It only affects the first two (out of three) buttons. This could be because there is not fourth button, i.e. the effect may be showing only because there is an adjacent button. This seems to happen in all browsers.

Attached are some screen shots showing the little line. Button1 showing odd line Button2 showing odd line

I made a JSFiddle sample showing the problem.

Or here is the Stack JSFiddle, too (didn't know it would do this):

element.style {
    margin-top: 4px;
    text-decoration: none;
    width: 75px;
}
*:before, *:after {
    box-sizing: border-box;
}
*:before, *:after {
    box-sizing: border-box;
}
.btn-m {
    background-color: rgb(220, 211, 188);
    border-color: rgb(120, 97, 68);
    color: rgb(69, 39, 0);
}
.btn-xs, .btn-group-xs > .btn {
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.5;
    padding: 1px 5px;
}
.btn {
    -moz-user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857;
    margin-bottom: 0;
    padding: 6px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.btn-m {
    background-color: rgb(220, 211, 188);
    border-color: rgb(120, 97, 68);
    color: rgb(69, 39, 0);
}
.btn-xs, .btn-group-xs > .btn {
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.5;
    padding: 1px 5px;
}
.btn {
    -moz-user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857;
    margin-bottom: 0;
    padding: 6px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
}
button, select {
    text-transform: none;
}
button {
    overflow: visible;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 5px;
    text-decoration: none;
}
* {
    box-sizing: border-box;
}
a {
    color: #000000;
}
a {
    color: #000000;
}
a {
    color: #428bca;
}
body {
    font-family: Tahoma,Verdana,sans-serif;
}
body {
    font-family: Tahoma,Verdana,sans-serif;
}
body {
    color: #333;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857;
}
html {
    font-size: 62.5%;
}
html {
    font-family: sans-serif;
}
<body>
<div style="position: absolute;top: 58px;left: 100px;">
<a href="log.php?Range=Today">
<button class="btn btn-m btn-xs" type="button" style="margin-top:4px; width: 75px; text-decoration: none;" title="Display records for Today only.">Today</button>
</a>

<button class="btn btn-m btn-xs" title="Display records for last 7 days." style="margin-top:4px; width:85px;" type="button">Last 7 Days   </button>

    <a href="">
        <button title="week." type="button">Week</button>
    </a>
    
<a href="log.php?Range=ThisMonth">
<button class="btn btn-m btn-xs" title="Display records from the first of the month through today." style="margin-top:4px; width:85px;" type="button">This Month</button>
</a>
</div>
</body>

For the CSS be aware that I just copied and pasted the CSS from the Firebug CSS window. The computed CSS that I had posted before was not showing all the values. Yes, the CSS is repetitive; we have a number of different sources/files defining things so they get repeated. The pasted result from Firebug makes that distinction hard to see, though. And the pasted version may be inverted? I.e. the 'inherited from HTML..' stuff at the bottom in the Fiddle is (I am guessing) actually the first thing that gets evaluated, and Firebug just inverts the CSS evaluation order (more useful for humans).

In doing a quick bit of fiddling, it appears that it is coming from the anchor tags. If I remove the wrapping anchor tag from the button defintion, the line goes away. (Oddly, on the JSFIddle, the mystery line shows up all the time, even when not hovering. Makes it a bit easier to see the issue I suppose.) I also created a new element and stuck it in there for some other testing. Whatever; the issue is still visible.

Any thoughts on what is causing the line or how to clean it up?

Thanks, J



Solution :

Set text-decoration property of your <a> tag to none as you are using button inside it.

a {
color: #000000;
text-decoration:none;
}

Complete Code

element.style {
    margin-top: 4px;
    text-decoration: none;
    width: 75px;
}
*:before, *:after {
    box-sizing: border-box;
}
*:before, *:after {
    box-sizing: border-box;
}
.btn-m {
    background-color: rgb(220, 211, 188);
    border-color: rgb(120, 97, 68);
    color: rgb(69, 39, 0);
}
.btn-xs, .btn-group-xs > .btn {
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.5;
    padding: 1px 5px;
}
.btn {
    -moz-user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857;
    margin-bottom: 0;
    padding: 6px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.btn-m {
    background-color: rgb(220, 211, 188);
    border-color: rgb(120, 97, 68);
    color: rgb(69, 39, 0);
}
.btn-xs, .btn-group-xs > .btn {
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.5;
    padding: 1px 5px;
}
.btn {
    -moz-user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857;
    margin-bottom: 0;
    padding: 6px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
}
button, select {
    text-transform: none;
}
button {
    overflow: visible;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 5px;
    text-decoration: none;
}
* {
    box-sizing: border-box;
}
a {
    color: #000000;
    text-decoration:none;

}
body {
    font-family: Tahoma,Verdana,sans-serif;
}
body {
    font-family: Tahoma,Verdana,sans-serif;
}
body {
    color: #333;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857;
}
html {
    font-size: 62.5%;
}
html {
    font-family: sans-serif;
}
<body>
<div style="position: absolute;top: 58px;left: 100px;">
<a href="log.php?Range=Today">
<button class="btn btn-m btn-xs" type="button" style="margin-top:4px; width: 75px; text-decoration: none;" title="Display records for Today only.">Today</button>
</a>

<button class="btn btn-m btn-xs" title="Display records for last 7 days." style="margin-top:4px; width:85px;" type="button">Last 7 Days   </button>

    <a href="">
        <button title="week." type="button">Week</button>
    </a>
    
<a href="log.php?Range=ThisMonth">
<button class="btn btn-m btn-xs" title="Display records from the first of the month through today." style="margin-top:4px; width:85px;" type="button">This Month</button>
</a>
</div>
</body>


    CSS Howto..

    How do you select a radio button in css?

    how to add JS and CSS tags from module without using header hook

    How can the css dottled border be implemented?

    How to align content to the bottom of a div?

    Menu CSS showing current page in a single html file

    How to make font-size less for 2px than parent element?

    how to make layers not overlap with each other in css [closed]

    How to pop a dialog box /iframe/Lightbox like one below above the webpage content [closed]

    How To Dark Image Background in CSS on hover?

    How to exclude an HTML element form Ionic CSS

    How do you use csslint from the command line?

    how to align right hand side image on top of text on mobile screen

    How do you change the appearance of a button in javascript?

    How to render email template in a page?

    How to extend Navigation in CSS

    How to write specific CSS for mozilla, chrome and IE

    How to set expanded menu to be shut on page load

    How come one jquery script cant effect another jquery script

    How to add left margin and wrap long lines in code tag

    How would YOU do this: Tables or CSS? [closed]

    How to stretch an element out vertically so that it is always at least as tall as its sibling?

    How to copy the GTK style of a widget and apply it to another?

    How to highlight a whole table cell with padding when hovering?

    Position: fixed Background DIV with images makes scrolling slow: How to make conditional CSS rules for browser-compatibility?

    how do i change the css property for only one row with a custom class with out removing the styles from the other rows?

    How I can change the position of 3 div's to be side by side?

    How to align image and advertisement side by side using CSS and HTML

    How to change all CSS file into SCSS

    How to make space between menu items in CSS/HTML

    How to debug HTML/CSS for iPhone/iPad performance?