user3550879 user3550879 - 1 year ago 78
CSS Question

css hover effect happening outside of button

My current code generates an element (black bar) on top and bottom of my link. a bottom bar is always there, the top bar happens just on hover.

My code works fine but the hover effect happens whenever the cursor is in line with the link (the 'hit' box seems to be 100% width of the screen even though the button is just the text)

#contact-btn a {
position: relative;
font-family: 'Montserrat', sans-serif;
display: inline-block;
font-size: 3em;
letter-spacing: 1px;
font-weight: 400;
color: #4d4d4d;

#contact-btn a:after, #contact-btn a:before {
display: block;
position: absolute;
content: '';
margin: 0 auto;
background-color: #4d4d4d;

#contact-btn a:after {
height: 2px; width: 100px;
bottom: -15px; left: 0; right: 0;

#contact-btn a:before {
height: 2px; width: 0;
top: -15px; left: 0; right: 0;

#contact-btn:hover a:after, #contact-btn:hover a:before { width: 175px; height: 2px; }


<div id="contact-btn">
<a href="mailTo:..."> Click here </a>

Answer Source

You havent set any style for the contact-btn div itself. Try this

#contact-btn {
   display: inline-block;
   position: relative; 
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download