Help, please, stylize the button so that when you hover the cursor, it and the text inside do not jump.

Initially, the button should be with a thin line in the background, and a full background 40px high appears in the hover.

jsfiddle sandbox

.btn-container { height: 40px; } .btn { display: inline-block; line-height: 8px; text-decoration: none; color: #000000; font-size: 18px; text-transform: uppercase; letter-spacing: 3px; font-weight: bold; width: 220px; height: 8px; background-color: #f0c52e; text-align: center; } .btn:hover { width: 220px; height: 40px; line-height: 40px; } 
 <div class="btn-container"> <a class="btn" href="#">More about us</a> </div>

    1 answer 1

    Fixed: https://jsfiddle.net/gambala/vay02592/

    You can do without the container for the button, and make the styling through the background. Btn: before.

     .btn:before { background-color: #f0c52e; bottom: 16px; content: ''; left: 0; position: absolute; right: 0; top: 16px; z-index: -1; } .btn:hover:before { bottom: 0; top: 0; }
    • Initially, the button should be with a thin line on the background, and a full background 40px high appears in the hover ( - Cyril
    • Sorry, did not save the fiddle before the last edit. Fixed. - Vitaly Emelyantsev
    • thank!!!!!!!!! - Kirill
    • gambala still would not be a big transition, finally it turns out - user33274
    • one
      gambala lyapota! I will even send a link to google + - user33274