user3550879 user3550879 - 4 months ago 6
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>


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

#contact-btn {
   display: inline-block;
   position: relative;