.button-box { margin-top: 50px; margin-left: 80px; width: 300px; height: 100px; background-color: lightgreen; position: relative; font-size: 40px; border: none; } .button-box__cage { position: absolute; width: calc(50% + 50px); height: calc(100% + 20px); background-color: orange; top: 50%; transform: translateY(-50%); z-index: 2; overflow: hidden; transition: all 0.5s; } .button-box1__cage--left:before, .button-box1__cage--right:before { content: 'Заказать'; position: absolute; width: 200px; height:70px; font-size: 50px; line-height: 120px; } .button-box1__cage--right, .button-box1__cage--left:before { right: 50%; } .button-box1__cage--left, .button-box1__cage--right:before { left: 50%; } .button-box:hover .button-box1__cage--left { left: 90%; } .button-box:hover .button-box1__cage--right { right: 90%; } /*!!!!!!!!!!!!!!!!!BUTTON2!!!!!!!!!!!!!!!!!!!!!!!*/ .button-box__cage span { position: absolute; left: 0; right: 0; line-height: 120px; text-transform: uppercase; } .button-box2__cage--left { left: 50%; } .button-box2__cage--left span { transform: translateX(-50%); } .button-box2__cage--right { right: 50%; } .button-box2__cage--right span { transform: translateX(50%); } .button-box:hover .button-box2__cage--left { left: 90%; } .button-box:hover .button-box2__cage--right { right: 90%; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <button class="button-box">Уверен? <span class="button-box__cage button-box1__cage--left"></span> <span class="button-box__cage button-box1__cage--right"></span> </button> <button class="button-box">Уверен? <span class="button-box__cage button-box2__cage--left"> <span>Заказать</span> </span> <span class="button-box__cage button-box2__cage--right"> <span>Заказать</span> </span> </button> </body> </html>

At first glance, everything is fine, but as the word lengthens, everything collapses. How to make a universal button for any word?

What generally can be corrected? The second option html creepy, I agree, but there is a place to be? Maybe some other options for execution who will tell?

    0