Good day! Tell me how to implement this button:

button screenshot

They are interested in the lines in the corners of the buttons highlighted on the screen.

    1 answer 1

    * { box-sizing: border-box; } body { background: #0A1527; } .btn { display: inline-block; padding: 15px 25px; min-width: 200px; text-align: center; color: #fff; background: #101A2D; position: relative; transition: .3s; } .btn:before, .btn:after { content: ''; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border: 2px solid #565D6B; border-right: none; border-bottom: none; transition: transform .5s; } .btn:after { top: auto; left: auto; bottom: 0; right: 0; border: 2px solid #565D6B; border-left: none; border-top: none; } .btn:hover { background: #f00; } .btn:hover:before { transform: translate(-5px, -5px); } .btn:hover:after { transform: translate(5px, 5px); } 
     <a href="#" class="btn">Button</a>