CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
John Dorean
John Dorean

Reputation: 3874

Button hover effect pulls up paragraph beneath

I'm trying to create a fancy button hover state for the default button in Bootstrap 3. Basically, the button starts out with 4px of border-bottom and when hovered this reduces to 2px. Because of this, I compensate with top: 2px on the button.

This works fine, however it's affecting other elements which I don't want it to do. For example, it pulls the paragraph beneath it up. Here's a JSFiddle example:

http://jsfiddle.net/kD6dQ/

You can see when you hover over the button the paragraph below changes position. How do I stop that?

I've tested this in the latest versions of Chrome and Firefox.

Upvotes: 0

Views: 108

Answers (3)

Ruddy
Ruddy

Reputation: 9923

The best way to solve this is to simply add height to .btn-default

E.G: height: 35px;

DEMO HERE

Upvotes: 1

donnywals
donnywals

Reputation: 7591

You used top for your element. When changed to margin-top it works.

fiddle

css:

.btn-default:hover {
    background: #eba22b;
    color: white;
    border-bottom: 2px solid #db9016;
    margin-top: 2px;
}

Upvotes: 2

Ovidiu Iacomi
Ovidiu Iacomi

Reputation: 776

Try this for the hover declaration:

.btn-default:hover {
    background: #eba22b;
    color: white;
    border-bottom: 2px solid #db9016;
    top: 2px;
    margin-bottom: 2px;
}

Check this fiddle: http://jsfiddle.net/kD6dQ/1/

Upvotes: 1

Related Questions