How to impose such a button?

On : hover , the whole button should respond.

<button>default</button>

enter image description here

  • What is your problem? What have you tried? What problems arose in the implementation process? - korytoff

2 answers 2

 * { box-sizing: border-box; } button { background: transparent; border: 2px solid #000; padding: 10px 75px 10px 45px; position: relative; transition: 0.3s; } button:after { content: '›'; position: absolute; top: 0; right: 0; height: 100%; width: 30px; line-height: 30px; font-size: 26px; border-left: 2px solid #000; } button:hover { background: #000; color: #fff; } button:hover:after { border-left-color: #fff; } 
 <button>default</button>

    The only thing that element: after would also be worth the transition

     * { box-sizing: border-box; } button { background: transparent; border: 2px solid #000; padding: 10px 75px 10px 45px; position: relative; transition: 0.3s; } button:after { content: '›'; position: absolute; top: 0; right: 0; height: 100%; width: 30px; line-height: 30px; font-size: 26px; border-left: 2px solid #000; transition: 0.3s; } button:hover { background: #000; color: #fff; } button:hover:after { border-left-color: #fff; } 
     <button>default</button>

    • What for? After all, he is now changing with a delay. - smellyshovel
    • But before that, everything was changed with a delay, except for the after element, was it piecewise better? .-. - Denis Karakchiev